"use client";

import { useEffect, useState } from "react";

type Dokument = {
  id: string;
  titel: string;
  beschreibung?: string;
  src: string;
  dateiname: string;
  kategorie: string;
  uploadedAt: string;
};

export default function DokumenteDownloads() {
  const [dokumente, setDokumente] = useState<Dokument[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    fetch("/api/dokumente")
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data)) setDokumente(data);
        else setError(true);
      })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return null;
  if (error) return (
    <p className="mt-6 text-sm text-gray-400">Dokumente konnten nicht geladen werden.</p>
  );
  if (dokumente.length === 0) return null;

  const byKategorie = dokumente.reduce<Record<string, Dokument[]>>((acc, d) => {
    (acc[d.kategorie] ??= []).push(d);
    return acc;
  }, {});

  return (
    <section className="mt-16">
      <h2 className="font-display text-3xl text-secondary">Dokumente &amp; Downloads</h2>
      <p className="mt-3 max-w-2xl text-sm leading-relaxed text-gray-500">
        Formulare, Reglemente und Vereinsdokumente zum Herunterladen.
      </p>

      <div className="mt-8 space-y-10">
        {Object.entries(byKategorie).map(([kategorie, docs]) => (
          <div key={kategorie}>
            <h3 className="mb-3 text-xs font-semibold uppercase tracking-widest text-gray-400">
              {kategorie}
            </h3>
            <ul className="divide-y divide-gray-100 rounded-lg border border-gray-200 bg-white">
              {docs.map(doc => (
                <li key={doc.id}>
                  <a
                    href={doc.src}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex items-center gap-4 px-5 py-4 transition-colors hover:bg-gray-50"
                    download={doc.dateiname}
                  >
                    <span className="text-2xl" aria-hidden="true">📄</span>
                    <div className="min-w-0 flex-1">
                      <p className="font-medium text-secondary group-hover:text-primary">
                        {doc.titel}
                      </p>
                      {doc.beschreibung && (
                        <p className="mt-0.5 text-sm text-gray-500">{doc.beschreibung}</p>
                      )}
                    </div>
                    <span className="shrink-0 text-xs font-medium text-primary opacity-0 transition-opacity group-hover:opacity-100">
                      PDF ↓
                    </span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}