"use client";

import Image from "next/image";
import { useEffect, useMemo, useState } from "react";

import { MediaLibraryBrowser } from "@/components/admin/media/MediaLibraryBrowser";
import { MediaUploader } from "@/components/admin/media/MediaUploader";
import { isInlineImageSrc } from "@/lib/image-utils";

export function MediaFieldPicker({
  name,
  label,
  directory,
  initialId,
  initialUrl,
}: {
  name: string;
  label: string;
  directory: string;
  initialId?: string | null;
  initialUrl?: string | null;
}) {
  const recentStorageKey = useMemo(
    () => `admin-recent-media:${name}`,
    [name],
  );
  const [selectedId, setSelectedId] = useState(initialId ?? "");
  const [selectedUrl, setSelectedUrl] = useState(initialUrl ?? "");
  const [libraryRefreshKey, setLibraryRefreshKey] = useState(0);
  const [isLibraryOpen, setIsLibraryOpen] = useState(false);
  // Inicijalno PRAZNO da bi server i client renderovali isti HTML —
  // localStorage se čita u useEffect ispod, posle hydration-a. Ako se
  // inicijalizuje iz localStorage-a direktno u useState, server vidi []
  // a client vidi N stavki → hydration mismatch (bg-white/65 vs /60 na
  // konditional containeru ispod).
  const [recentItems, setRecentItems] = useState<
    Array<{ id: string; url: string; alt?: string | null; mimeType?: string | null; createdAt?: string | null }>
  >([]);

  useEffect(() => {
    let timeoutId: number | undefined;
    try {
      const raw = window.localStorage.getItem(recentStorageKey);
      if (!raw) return;
      const parsed = JSON.parse(raw) as Array<{
        id: string;
        url: string;
        alt?: string | null;
        mimeType?: string | null;
        createdAt?: string | null;
      }>;
      if (Array.isArray(parsed)) {
        timeoutId = window.setTimeout(() => setRecentItems(parsed.slice(0, 8)), 0);
      }
    } catch {
      // Storage quota / privacy block — ignoriši, recent ostaje prazan.
    }
    return () => {
      if (timeoutId !== undefined) window.clearTimeout(timeoutId);
    };
  }, [recentStorageKey]);

  function rememberRecentItems(
    items: Array<{ id: string; url: string; alt?: string | null; mimeType?: string | null; createdAt?: string | null }>,
  ) {
    setRecentItems((current) => {
      const merged = [...items, ...current].filter(
        (item, index, array) => array.findIndex((entry) => entry.id === item.id) === index,
      );
      const trimmed = merged.slice(0, 8);

      try {
        window.localStorage.setItem(recentStorageKey, JSON.stringify(trimmed));
      } catch {
        // Storage quota or privacy restrictions should not block the picker.
      }

      return trimmed;
    });
  }

  return (
    <div className="space-y-4 rounded-[1.75rem] border border-border bg-white/70 p-5">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
            {label}
          </p>
          <p className="mt-2 text-sm text-muted-foreground">
            Uploaduj sliku i ona će biti vezana za ovaj profil.
          </p>
        </div>
        {selectedUrl ? (
          <button
            type="button"
            onClick={() => {
              setSelectedId("");
              setSelectedUrl("");
            }}
            className="ghost-button px-4 py-2 text-xs"
          >
            Ukloni
          </button>
        ) : null}
      </div>

      <input type="hidden" name={name} value={selectedId} />

      {selectedUrl ? (
        <Image
          src={selectedUrl}
          alt={label}
          width={720}
          height={420}
          className="h-44 w-full rounded-[1.5rem] object-cover"
          unoptimized={isInlineImageSrc(selectedUrl)}
        />
      ) : (
        <div className="flex h-44 items-center justify-center rounded-[1.5rem] border border-dashed border-border bg-background/70 text-sm text-muted-foreground">
          Nema odabrane slike
        </div>
      )}

      <MediaUploader
        directory={directory}
        title={`Upload ${label.toLowerCase()}`}
        description="Poslednji upload postaje aktivan izbor za ovo polje."
        buttonLabel={`Izaberi ${label.toLowerCase()}`}
        onUploaded={(items) => {
          const first = items[0];

          if (!first) {
            return;
          }

          rememberRecentItems(
            items.map((item) => ({
              id: item.id,
              url: item.url,
              alt: `${label} upload`,
              mimeType: "image/*",
              createdAt: new Date().toISOString(),
            })),
          );
          setSelectedId(first.id);
          setSelectedUrl(first.url);
          setLibraryRefreshKey((value) => value + 1);
        }}
      />

      {recentItems.length ? (
        <div className="rounded-[1.75rem] border border-border bg-white/65 p-5">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
                Poslednje korišćene slike
              </p>
              <p className="mt-2 text-sm text-muted-foreground">
                Najbrži izbor za logo i cover bez otvaranja cele biblioteke.
              </p>
            </div>
            <span className="admin-chip">{recentItems.length}</span>
          </div>
          <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            {recentItems.map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => {
                  setSelectedId(item.id);
                  setSelectedUrl(item.url);
                  rememberRecentItems([item]);
                }}
                data-active={selectedId === item.id}
                className="group rounded-[1.35rem] border border-border bg-white/88 p-2 text-left transition hover:-translate-y-0.5 hover:shadow-[0_14px_30px_rgba(12,24,40,0.08)] data-[active=true]:border-secondary/28 data-[active=true]:shadow-[0_18px_40px_rgba(194,65,12,0.12)]"
              >
                <div className="relative h-28 overflow-hidden rounded-[1rem] bg-muted">
                  <Image
                    src={item.url}
                    alt={item.alt || label}
                    fill
                    className="object-cover"
                    unoptimized={isInlineImageSrc(item.url)}
                  />
                </div>
                <div className="mt-3 flex items-center justify-between gap-2">
                  <span className="line-clamp-1 text-xs font-semibold text-foreground">
                    {item.alt || "Nedavni izbor"}
                  </span>
                  <span className="inline-toggle" data-active={selectedId === item.id}>
                    {selectedId === item.id ? "Aktivno" : "Izaberi"}
                  </span>
                </div>
              </button>
            ))}
          </div>
        </div>
      ) : null}

      <div className="rounded-[1.75rem] border border-border bg-white/60 p-5">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
              Centralna biblioteka
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              Otvori celu biblioteku samo kada želiš dublju pretragu postojećih asseta.
            </p>
          </div>
          <button
            type="button"
            onClick={() => setIsLibraryOpen((value) => !value)}
            className="ghost-button"
          >
            {isLibraryOpen ? "Zatvori biblioteku" : "Otvori biblioteku"}
          </button>
        </div>

        {isLibraryOpen ? (
          <div className="mt-5">
            <MediaLibraryBrowser
              title={`Biblioteka za ${label.toLowerCase()}`}
              description="Možeš da izabereš i postojeći asset iz centralne media biblioteke bez novog uploada."
              limit={12}
              selectable
              selectedId={selectedId}
              preferredItems={recentItems}
              refreshKey={libraryRefreshKey}
              onSelect={(item) => {
                setSelectedId(item.id);
                setSelectedUrl(item.url);
                rememberRecentItems([item]);
              }}
            />
          </div>
        ) : null}
      </div>
    </div>
  );
}