---
// src/pages/contribute/index.astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import { withAuth } from '../../utils/auth.js'; 

export const prerender = false;

const authResult = await withAuth(Astro, 'contributions');
if (authResult instanceof Response) {
  return authResult; 
}

const { authenticated, userEmail, userId } = authResult;
---

<BaseLayout title="Contribute" description="Inhalte zum ForensicPathways beitragen">
  <section class="section-padding">
    <div class="header-center header-primary mb-8">
      <h1 style="margin-bottom: 1rem; font-size: 2.5rem;">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.75rem; vertical-align: middle;">
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="8.5" cy="7" r="4"/>
          <line x1="20" y1="8" x2="20" y2="14"/>
          <line x1="23" y1="11" x2="17" y2="11"/>
        </svg>
        Zum ForensicPathways beitragen
      </h1>
      <p style="margin: 0; opacity: 0.9; line-height: 1.6; font-size: 1.125rem;">
        Habt ihr Ideen/Ergänzungen zu den dargestellten Tools/Methoden/Konzepten? Oder habt ihr einen umfangreicheren Eintrag für unsere Knowledgebase?
        Hier habt ihr die Möglichkeit, direkt beizutragen!
      </p>
      {userEmail && (
        <p style="margin-top: 1rem; opacity: 0.8; font-size: 0.9rem;">
          Angemeldet als: <strong>{userEmail}</strong>
        </p>
      )}
    </div>

<div
  style="
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap:2rem;
    align-items:stretch;
    margin-bottom: 2rem;
  "
>

<div class="card" 
     style="padding: 2rem; border-left: 4px solid var(--color-primary); transition: var(--transition-fast);
            display:flex; flex-direction:column;">
  <div class="flex items-center gap-4 mb-6">
    <div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
      </svg>
    </div>
    <h3 style="margin: 0; color: var(--color-primary); font-size: 1.25rem;">Software, Methoden oder Konzepte</h3>
  </div>
  
  <p style="margin-bottom: 1.5rem; line-height: 1.6;">
    Ergänzt Software/Tools, forensische Methoden und relevante Konzepte zu unserer Datenbank.
    Füllt einfach ein kurzes Formular aus!
  </p>
  
  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
    <span class="badge" style="background-color: var(--color-primary); color: white;">Software/Tools</span>
    <span class="badge" style="background-color: var(--color-method); color: white;">Methoden</span>
    <span class="badge" style="background-color: var(--color-concept); color: white;">Konzepte</span>
  </div>
  
  <div style="margin-top:auto; display:flex; flex-direction: column; gap:1rem;">
    <a href="/contribute/tool" class="btn btn-primary" style="width: 100%;">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
        <line x1="12" y1="5" x2="12" y2="19"/>
        <line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
      Neuer Eintrag
    </a>
    
    <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem; border-left: 3px solid var(--color-accent);">
      <div style="display: flex; align-items: start; gap: 0.75rem;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" style="flex-shrink: 0; margin-top: 0.125rem;">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
        <div>
          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent); font-size: 0.9375rem;">Existierenden Eintrag bearbeiten</h4>
          <p style="margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-secondary);">
            Suchen Sie das Tool/Methode/Konzept auf der <a href="/" style="color: var(--color-primary); text-decoration: underline;">Hauptseite</a>, 
            öffnen Sie die Details und klicken Sie den <strong style="color: var(--color-text);">Edit</strong>-Button.
          </p>
          <div style="margin-top: 0.75rem;">
            <a href="/" class="btn btn-secondary" style="font-size: 0.8125rem; padding: 0.5rem 1rem;">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.375rem;">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9,22 9,12 15,12 15,22"/>
              </svg>
              Zur Hauptseite
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <div class="card" 
       style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
              display:flex; flex-direction:column;" 
       onclick="window.location.href='/contribute/knowledgebase'">
    <div class="flex items-center gap-4 mb-6">
      <div style="width: 48px; height: 48px; background-color: var(--color-accent); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="16" y1="13" x2="8" y2="13"/>
          <line x1="16" y1="17" x2="8" y2="17"/>
          <polyline points="10 9 9 9 8 9"/>
        </svg>
      </div>
      <h3 style="margin: 0; color: var(--color-accent); font-size: 1.25rem;">Knowledgebase-Artikel</h3>
    </div>
    
    <p style="margin-bottom: 1.5rem; line-height: 1.6;">
      Wenn ihr einen umfangreicheren Beitrag zu einem Tool, einer Methode oder einem Kozept habt, könnt ihr ihn hier einreichen.
      Der Upload von beliebigen Dateien und Unterlagen ist hier möglich, und wird manuell von mir integriert.
    </p>
    
    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
      <span class="badge badge-secondary">Installationsanleitungen</span>
      <span class="badge badge-secondary">Tutorials</span>
      <span class="badge badge-secondary">Best Practices</span>
      <span class="badge badge-secondary">Fallstudien</span>
    </div>
    
    <div style="margin-top:auto; display:flex; gap:1rem;">
      <a href="/contribute/knowledgebase" class="btn btn-accent" style="flex: 1;">Beitrag einreichen</a>
      <a href="/knowledgebase" class="btn btn-secondary" style="flex: 1;">Beiträge ansehen</a>
    </div>
  </div>

  <div class="card" 
       style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
              display:flex; flex-direction:column;">
    <div class="flex items-center gap-4 mb-6">
      <div style="width: 48px; height: 48px; background-color: var(--color-warning); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <circle cx="12" cy="12" r="10"/>
          <line x1="12" y1="8" x2="12" y2="12"/>
          <line x1="12" y1="16" x2="12.01" y2="16"/>
        </svg>
      </div>
      <h3 style="margin: 0; color: var(--color-warning); font-size: 1.25rem;">Probleme & Verbesserungen</h3>
    </div>
    
    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: center;">
      <div style="display:flex; flex-direction:column;">
        <p style="margin-bottom: 1rem; line-height: 1.6;">
          Ist euch ein Bug oder eine fehlerhafte Information aufgefallen? Auch wenn es nur Kleinigkeiten sind - hier könnt ihr sie einreichen.
          Erstellt direkt einen Issue in unserem Git.
        </p>
        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
          <span class="badge" style="background-color: var(--color-warning); color: white;">Bug Reports</span>
          <span class="badge" style="background-color: var(--color-warning); color: white;">Korrekturen</span>
          <span class="badge" style="background-color: var(--color-warning); color: white;">Vorschläge</span>
        </div>
      </div>
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <a href="https://git.cc24.dev/mstoeck3/forensic-pathways/issues/new" target="_blank" rel="noopener noreferrer" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
            <polyline points="15 3 21 3 21 9"/>
            <line x1="10" y1="14" x2="21" y2="3"/>
          </svg>
          Problem melden
        </a>
      </div>
    </div>

    <div style="margin-top:auto;"></div>
  </div>

</div>


    <div class="card" style="margin-bottom: 2rem;">
      <h3 style="margin-bottom: 1.5rem; color: var(--color-text);">Richtlinien</h3>
      
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
        <div>
          <h4 style="margin-bottom: 0.75rem; color: var(--color-primary);">Empfehlungen</h4>
          <ul style="margin: 0; padding-left: 1.5rem; line-height: 1.6;">
            <li>Informationen sollten stets korrekt und up-to-date sein</li>
            <li>Nutzt klare, verständliche Sprache</li>
            <li>Nutzt passende Tags und Kategorisierungen</li>
            <li>Verifiziert, ob alle Links funktionieren</li>
            <li>Testet die Tools/Methoden oder Installationsanleitungen nach Möglichkeit vorher aus</li>
            <li>Stellt auf keinen Fall Informationen ein, die nicht öffentlich sein dürfen. Alles wird unter BSD-3-Clause-Veröffentlicht.</li>
          </ul>
        </div>
        
        <div>
          <h4 style="margin-bottom: 0.75rem; color: var(--color-accent);">Review</h4>
          <ul style="margin: 0; padding-left: 1.5rem; line-height: 1.6;">
            <li>Alle Beiträge werden transparent als Pull Requests in unserem Git veröffentlicht</li>
            <li>Die Inforamtionen werden teilweise automatisiert validiert</li>
            <li>Manuelle Prüfung innerhalb des Git-Review-Prozesses durch Maintainer</li>
            <li>Feedback durch PR-Kommentare, ggf. auch direkt</li>
            <li>Der PR wird dann zeitnah veröffentlicht und ist beim nächsten Serverupdate verfügbar</li>
          </ul>
        </div>
        
        <div>
          <h4 style="margin-bottom: 0.75rem; color: var(--color-warning);">Best Practices</h4>
          <ul style="margin: 0; padding-left: 1.5rem; line-height: 1.6;">
            <li>Vermeidet Duplokate</li>
            <li>Versucht, konsistent bei der Benennung, Kategorisierung und Tags zu sein</li>
            <li>Schreibt detaillierte Beschreibungen</li>
            <li>Inkludiert Screenshots bei komplizierten Guides</li>
            <li>Nennt eure Primärquellen</li>
          </ul>
        </div>
      </div>
    </div>

  <script>
    document.querySelectorAll('.card[onclick]').forEach((card) => {
      const cardEl = card as HTMLElement;
      cardEl.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-2px)';
        this.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.12)';
      });
      
      cardEl.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0)';
        this.style.boxShadow = '';
      });
    });
  </script>
</BaseLayout>