import { archiveGalleryItemAction, saveGalleryItemAction } from "@/app/admin/actions";
import AdminFeedback from "@/components/admin/AdminFeedback";
import { CheckField, FormCard, SelectField, SubmitButton, TextAreaField, TextField } from "@/components/admin/AdminFormFields";
import AdminShell from "@/components/admin/AdminShell";
import { requireAdminPermission } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { ImageIcon, Plus, Video } from "lucide-react";
import AdminAssetField from "@/components/admin/AdminAssetField";
import Image from "next/image";
import Link from "next/link";
import { hasAdminPermission } from "@/lib/admin-permissions";

export const revalidate = 0;

export default async function AdminGalleryPage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const session = await requireAdminPermission("gallery", "view");
  const query = await searchParams;
  const editId = typeof query.edit === "string" ? query.edit : null;
  const items = await prisma.galleryItem.findMany({ where: { status: { not: "archived" } }, orderBy: [{ order: "asc" }, { createdAt: "asc" }] });
  const selected = editId ? items.find((item) => item.id === editId) : null;
  const isFilm = selected ? selected.kind === "film" : true;
  const canCreate = hasAdminPermission(session, "gallery", "create");
  const canEdit = hasAdminPermission(session, "gallery", "edit");
  const canPublish = hasAdminPermission(session, "gallery", "publish");
  const canArchive = hasAdminPermission(session, "gallery", "archive");
  const canUpload = hasAdminPermission(session, "gallery", "upload");
  const canManageForm = selected ? canEdit : canCreate;

  return (
    <AdminShell
      eyebrow="Medya kütüphanesi"
      title="Norden Gallery"
      description="Ana ekran filmleri, galeri videoları ve fotoğrafları; sıraları, posterleri ve üç dildeki metinleriyle birlikte yönetin."
      actions={canCreate ? <Link href="/admin/gallery?new=1" className="inline-flex items-center gap-2 rounded-full bg-ember px-5 py-3 text-[10px] font-semibold uppercase tracking-[0.15em] text-surface-0"><Plus size={14} /> Yeni medya</Link> : undefined}
    >
      <AdminFeedback saved={typeof query.saved === "string" ? query.saved : undefined} error={typeof query.error === "string" ? query.error : undefined} />
      <div className="grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
        <div className="space-y-3">
          {items.map((item) => (
            <Link key={item.id} href={`/admin/gallery?edit=${item.id}`} className={`grid grid-cols-[92px_1fr] gap-4 rounded-2xl border p-3 transition ${selected?.id === item.id ? "border-ember/50 bg-ember/[0.07]" : "border-border bg-surface-1/50 hover:border-border-strong"}`}>
              <div className="relative aspect-video overflow-hidden rounded-xl bg-surface-0">
                {item.kind === "film" ? (
                  item.poster ? <Image src={item.poster} alt="" fill unoptimized className="object-cover opacity-75" sizes="92px" /> : <Video className="absolute inset-0 m-auto text-fg-muted" size={22} />
                ) : <Image src={item.source} alt={item.altTr || ""} fill unoptimized className="object-cover" sizes="92px" />}
              </div>
              <div className="min-w-0">
                <div className="flex items-center gap-2"><span className="text-ember">{item.kind === "film" ? <Video size={13} /> : <ImageIcon size={13} />}</span><p className="truncate font-medium">{item.titleTr || item.captionTr || item.key}</p></div>
                <p className="mt-1 truncate text-[10px] text-fg-muted">{item.key}</p>
                <p className="mt-3 text-[9px] uppercase tracking-[0.12em] text-fg-muted">Sıra {item.order} · {item.status === "published" ? "Yayında" : "Taslak"}{item.featured ? " · Ana ekran" : ""}</p>
              </div>
            </Link>
          ))}
        </div>

        <FormCard title={selected ? `${selected.key} içeriğini düzenle` : "Yeni medya ekle"} subtitle="Dosya yolu bugün yerel /media dizinini, R2 geçişinden sonra aynı alanda CDN adresini kabul eder.">
          {!canManageForm ? <div className="mb-5 rounded-2xl border border-border bg-white/[0.025] p-4 text-sm text-fg-secondary">Bu medya kaydı için yalnız görüntüleme yetkiniz bulunuyor.</div> : null}
          <form action={saveGalleryItemAction} className="space-y-7">
            {selected ? <input type="hidden" name="id" value={selected.id} /> : null}
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
              <TextField label="İçerik kodu" name="key" defaultValue={selected?.key} required placeholder="norden-yeni-film" />
              <SelectField label="Medya tipi" name="kind" defaultValue={selected?.kind || "film"}><option value="film">Video</option><option value="image">Fotoğraf</option></SelectField>
              <TextField label="Gösterim sırası" name="order" type="number" min={0} max={999} defaultValue={selected?.order ?? items.length + 1} />
              <SelectField label="Yayın durumu" name="status" defaultValue={selected?.status || "draft"}><option value="draft">Taslak</option>{canPublish || selected?.status === "published" ? <option value="published">Yayında</option> : null}</SelectField>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <AdminAssetField label="Ana medya" name="source" defaultValue={selected?.source} required accept="image/png,image/jpeg,image/webp,video/mp4,video/webm" hint="Video üst sınırı 150 MB; yayın için optimize MP4/WebM önerilir." canUpload={canUpload} uploadModule="gallery" />
              <AdminAssetField label="Mobil video" name="mobileSource" defaultValue={selected?.mobileSource} accept="video/mp4,video/webm" canUpload={canUpload} uploadModule="gallery" />
              <AdminAssetField label="Poster görseli" name="poster" defaultValue={selected?.poster} canUpload={canUpload} uploadModule="gallery" />
              <AdminAssetField label="Yedek poster" name="posterFallback" defaultValue={selected?.posterFallback} canUpload={canUpload} uploadModule="gallery" />
            </div>

            {canPublish ? <CheckField label="Ana ekranda döndür" name="featured" defaultChecked={selected?.featured} description="Yalnız optimize edilmiş ana videolarda açın; 4K ağır videolar galeride kalmalıdır." /> : <>{selected?.featured ? <input type="hidden" name="featured" value="on" /> : null}<p className="text-xs text-fg-muted">Ana ekran görünürlüğünü değiştirme yetkiniz yok.</p></>}

            <div className="grid gap-5 lg:grid-cols-3">
              {(["Tr", "En", "Ru"] as const).map((locale) => (
                <div key={locale} className="space-y-4 rounded-2xl border border-border bg-surface-0/45 p-4">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-ember">{locale === "Tr" ? "Türkçe" : locale === "En" ? "English" : "Русский"}</p>
                  <TextField label="Üst etiket" name={`eyebrow${locale}`} defaultValue={selected?.[`eyebrow${locale}`]} />
                  <TextField label="Başlık" name={`title${locale}`} defaultValue={selected?.[`title${locale}`]} />
                  <TextAreaField label="Açıklama" name={`description${locale}`} defaultValue={selected?.[`description${locale}`]} rows={4} />
                  <TextField label="Görsel alternatif metni" name={`alt${locale}`} defaultValue={selected?.[`alt${locale}`]} />
                  <TextAreaField label="Fotoğraf alt yazısı" name={`caption${locale}`} defaultValue={selected?.[`caption${locale}`]} rows={3} />
                </div>
              ))}
            </div>

            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
              <TextField label="Süre etiketi" name="durationLabel" defaultValue={selected?.durationLabel} placeholder="00:10" />
              <TextField label="Saniye" name="durationSeconds" type="number" step="0.001" min={0} defaultValue={selected?.durationSeconds} />
              <TextField label="Genişlik (px)" name="width" type="number" min={1} defaultValue={selected?.width} />
              <TextField label="Yükseklik (px)" name="height" type="number" min={1} defaultValue={selected?.height} />
              <TextField label="Dosya boyutu (byte)" name="byteSize" type="number" min={0} defaultValue={selected?.byteSize} />
            </div>

            <div className="flex justify-between gap-3 border-t border-border pt-6">
              {canManageForm ? <SubmitButton>{selected ? "Medyayı güncelle" : "Medyayı oluştur"}</SubmitButton> : <span />}
              <span className="self-center text-xs text-fg-muted">{isFilm ? "Video kaydı" : "Fotoğraf kaydı"}</span>
            </div>
          </form>
          {selected && canArchive ? <form action={archiveGalleryItemAction} className="mt-4 border-t border-border pt-4"><input type="hidden" name="id" value={selected.id} /><button type="submit" className="text-xs text-red-300">Bu medyayı arşive al</button></form> : null}
        </FormCard>
      </div>
    </AdminShell>
  );
}