import Image from "next/image";
import { redirect } from "next/navigation";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminSession } from "@/lib/admin/auth";
import { listMediaFiles } from "@/lib/admin/media";

function formatBytes(size: number) {
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
  return `${(size / 1024 / 1024).toFixed(1)} MB`;
}

function uploadErrorMessage(error?: string) {
  if (!error) return "";
  if (error === "missing-file") return "Bitte wählen Sie eine Datei aus.";
  if (error === "storage") return "Die Datei konnte nicht gespeichert werden. Bitte Upload-Speicher und Rechte prüfen.";
  return error;
}

export default async function AdminMediaPage({ searchParams }: { searchParams: Promise<{ uploaded?: string; error?: string }> }) {
  if (!await requireAdminSession()) redirect("/admin/login");
  const [files, params] = await Promise.all([listMediaFiles(), searchParams]);
  const error = uploadErrorMessage(params.error);

  return (
    <AdminShell>
      <div className="admin-page-head">
        <p className="eyebrow">Assets</p>
        <h1>Medienverwaltung</h1>
      </div>
      {params.uploaded === "1" && <p className="success">Datei wurde erfolgreich hochgeladen.</p>}
      {error && <p className="error admin-message">Upload fehlgeschlagen: {error}</p>}
      <form className="admin-card admin-upload" action="/api/admin/media" method="post" encType="multipart/form-data">
        <label>Datei hochladen<input name="file" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" /></label>
        <button className="button" type="submit">Datei hochladen</button>
      </form>
      <section className="admin-card">
        <h2>Uploads</h2>
        {files.length === 0 ? (
          <div className="media-empty">
            <h3>Noch keine Medien vorhanden</h3>
            <p>Hochgeladene Bilder und PDF-Dateien erscheinen hier mit Vorschau und Metadaten.</p>
          </div>
        ) : (
          <div className="media-list">
            {files.map((file) => (
              <article key={file.name} className="media-row">
                <a className="media-preview" href={file.url} target="_blank" rel="noreferrer">
                  {file.isImage
                    ? <Image src={file.url} alt={file.name} width={220} height={140} />
                    : <span>{file.type}</span>}
                </a>
                <div>
                  <h3>{file.name}</h3>
                  <dl className="media-meta">
                    <div><dt>Typ</dt><dd>{file.type}</dd></div>
                    <div><dt>Größe</dt><dd>{formatBytes(file.size)}</dd></div>
                    <div><dt>Upload</dt><dd>{new Date(file.uploadedAt).toLocaleString("de-DE")}</dd></div>
                  </dl>
                </div>
              </article>
            ))}
          </div>
        )}
      </section>
    </AdminShell>
  );
}