"use client";

import Image from "next/image";
import Link from "next/link";
import { useMemo, useState, useTransition } from "react";
import { useRouter } from "next/navigation";

import { BulkDeleteButton } from "@/components/admin/common/BulkDeleteButton";
import { Spinner } from "@/components/common/Spinner";

type ProductStatus = "DRAFT" | "PUBLISHED" | "OUT_OF_STOCK" | "SOLD_OUT" | "ARCHIVED";

type ProductRow = {
  id: string;
  title: string;
  companyName: string;
  categoryName: string;
  status: ProductStatus;
  isFeatured: boolean;
  price: number | null;
  currency: string | null;
  coverUrl?: string | null;
};

const STATUS_OPTIONS: ProductStatus[] = [
  "DRAFT",
  "PUBLISHED",
  "OUT_OF_STOCK",
  "SOLD_OUT",
  "ARCHIVED",
];

const STATUS_LABELS: Record<ProductStatus, string> = {
  DRAFT: "Nacrt",
  PUBLISHED: "Objavljeno",
  OUT_OF_STOCK: "Nema na stanju",
  SOLD_OUT: "Rasprodato",
  ARCHIVED: "Arhivirano",
};

const STATUS_COLORS: Record<ProductStatus, string> = {
  DRAFT: "bg-amber-50 text-amber-700 border-amber-200",
  PUBLISHED: "bg-emerald-50 text-emerald-700 border-emerald-200",
  OUT_OF_STOCK: "bg-orange-50 text-orange-700 border-orange-200",
  SOLD_OUT: "bg-red-50 text-red-600 border-red-200",
  ARCHIVED: "bg-slate-50 text-slate-500 border-slate-200",
};

function applyChanges(rows: ProductRow[], ids: string[], changes: Partial<ProductRow>) {
  const touched = new Set(ids);
  return rows.map((row) => (touched.has(row.id) ? { ...row, ...changes } : row));
}

function formatCurrency(value?: number | null, currency?: string | null) {
  if (typeof value !== "number") return "Cena na upit";
  return new Intl.NumberFormat("sr-Latn-RS", {
    style: "currency",
    currency: currency || "RSD",
    maximumFractionDigits: 0,
  }).format(value);
}

export function StoreProductListManager({ items: initialItems }: { items: ProductRow[] }) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkStatus, setBulkStatus] = useState("");
  const [bulkFeatured, setBulkFeatured] = useState<"" | "true" | "false">("");
  const [message, setMessage] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("");
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const q = search.trim().toLowerCase();
  const filtered = useMemo(
    () =>
      items
        .filter((i) => (!statusFilter || i.status === statusFilter))
        .filter(
          (i) =>
            !q ||
            i.title.toLowerCase().includes(q) ||
            i.companyName.toLowerCase().includes(q) ||
            (i.categoryName ?? "").toLowerCase().includes(q),
        ),
    [items, q, statusFilter],
  );
  const allSelected = filtered.length > 0 && filtered.every((i) => selectedIds.includes(i.id));

  async function submit(ids: string[], changes: Partial<ProductRow>, successMessage: string) {
    const response = await fetch("/api/admin/store-products/bulk", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ ids, changes }),
    });
    const result = (await response.json()) as { message?: string };
    if (!response.ok) throw new Error(result.message || "Izmena proizvoda nije uspela.");
    setItems((current) => applyChanges(current, ids, changes));
    setMessage(successMessage);
    router.refresh();
  }

  function handleSingleUpdate(id: string, changes: Partial<ProductRow>, successMessage: string) {
    startTransition(async () => {
      try {
        await submit([id], changes, successMessage);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Izmena nije uspela.");
      }
    });
  }

  function handleBulkUpdate() {
    const changes: Partial<ProductRow> = {};
    if (bulkStatus) changes.status = bulkStatus as ProductStatus;
    if (bulkFeatured) changes.isFeatured = bulkFeatured === "true";
    startTransition(async () => {
      try {
        await submit(selectedIds, changes, `Masovna izmena je sačuvana za ${selectedIds.length} proizvoda.`);
        setSelectedIds([]);
        setBulkStatus("");
        setBulkFeatured("");
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Masovna izmena nije uspela.");
      }
    });
  }

  function handleDelete(id: string, title: string) {
    if (!window.confirm(`Obrisati proizvod „${title}"? Ova radnja se ne može poništiti.`)) return;
    setDeletingId(id);
    startTransition(async () => {
      try {
        const res = await fetch("/api/admin/store-products/bulk", {
          method: "DELETE",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ ids: [id] }),
        });
        if (!res.ok) {
          const data = (await res.json().catch(() => ({}))) as { message?: string };
          throw new Error(data?.message || "Brisanje nije uspelo.");
        }
        setItems((prev) => prev.filter((x) => x.id !== id));
        setSelectedIds((prev) => prev.filter((x) => x !== id));
        setMessage(`Proizvod „${title}" je obrisan.`);
        router.refresh();
      } catch (err) {
        setMessage(err instanceof Error ? err.message : "Brisanje nije uspelo.");
      } finally {
        setDeletingId(null);
      }
    });
  }

  return (
    <section className="admin-toolbar overflow-hidden rounded-[2rem]">
      {/* Header + KPI */}
      <div className="flex flex-col gap-4 border-b border-border px-5 py-4 xl:flex-row xl:items-center xl:justify-between">
        <div className="flex flex-wrap items-center gap-3">
          <span className="admin-chip">Ukupno: {items.length}</span>
          <span className="admin-chip">Označeno: {selectedIds.length}</span>
          <span className="admin-chip text-emerald-600">
            Objavljeno: {items.filter((i) => i.status === "PUBLISHED").length}
          </span>
          <span className="admin-chip text-primary">
            Istaknuto: {items.filter((i) => i.isFeatured).length}
          </span>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <div className="relative min-w-[200px]">
            <span className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" />
              </svg>
            </span>
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Pretraži proizvode…"
              className="h-10 w-full rounded-full border border-border bg-white pl-10 pr-4 text-sm"
            />
          </div>
          <select
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
            className="h-10 rounded-full border border-border bg-white px-4 text-sm"
          >
            <option value="">Svi statusi</option>
            {STATUS_OPTIONS.map((s) => (
              <option key={s} value={s}>{STATUS_LABELS[s]}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Bulk akcije */}
      <div className="grid gap-3 border-b border-border px-5 py-4 lg:grid-cols-[repeat(2,minmax(0,1fr))_auto_auto]">
        <select className="inline-select" value={bulkStatus} onChange={(e) => setBulkStatus(e.target.value)}>
          <option value="">Masovni status</option>
          {STATUS_OPTIONS.map((s) => (
            <option key={s} value={s}>{STATUS_LABELS[s]}</option>
          ))}
        </select>
        <select className="inline-select" value={bulkFeatured} onChange={(e) => setBulkFeatured(e.target.value as "" | "true" | "false")}>
          <option value="">Masovno isticanje</option>
          <option value="true">Istaknuto</option>
          <option value="false">Standardno</option>
        </select>
        <button
          type="button"
          className="primary-button justify-center inline-flex items-center gap-2"
          onClick={handleBulkUpdate}
          disabled={isPending || !selectedIds.length || (!bulkStatus && !bulkFeatured)}
        >
          {isPending && selectedIds.length ? <Spinner className="h-4 w-4" /> : null}
          Primeni na označene
        </button>
        <BulkDeleteButton
          endpoint="/api/admin/store-products/bulk"
          ids={selectedIds}
          itemLabel="proizvoda"
          onDeleted={(ids) => {
            setItems((current) => current.filter((row) => !ids.includes(row.id)));
            setSelectedIds([]);
            router.refresh();
          }}
        />
      </div>

      {message ? (
        <div className="border-b border-border bg-accent/55 px-5 py-3 text-sm font-medium text-primary">
          {message}
        </div>
      ) : null}

      {/* Tabela */}
      {filtered.length === 0 ? (
        <div className="px-6 py-16 text-center">
          <p className="text-lg font-semibold text-foreground">
            {q || statusFilter ? "Nema rezultata" : "Nema proizvoda"}
          </p>
          <p className="mt-2 text-sm text-muted-foreground">
            {q || statusFilter ? "Promeni pretragu ili filter." : "Kreiraj prvi proizvod dugmetom iznad."}
          </p>
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="border-b border-border bg-[#faf9f7] text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
                <th className="w-10 px-4 py-3 text-left">
                  <input
                    type="checkbox"
                    checked={allSelected}
                    onChange={() =>
                      setSelectedIds(allSelected ? [] : filtered.map((i) => i.id))
                    }
                    aria-label="Označi sve proizvode"
                    className="size-4"
                  />
                </th>
                <th className="w-16 px-2 py-3 text-left">Slika</th>
                <th className="px-4 py-3 text-left">Naziv / Kompanija</th>
                <th className="hidden px-4 py-3 text-left lg:table-cell">Kategorija</th>
                <th className="px-3 py-3 text-right">Cena</th>
                <th className="px-3 py-3 text-center">Istaknuto</th>
                <th className="px-4 py-3 text-left">Status</th>
                <th className="w-48 px-4 py-3 text-right">Akcije</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((item) => {
                const isSelected = selectedIds.includes(item.id);
                return (
                  <tr
                    key={item.id}
                    className={`border-b border-border/60 transition hover:bg-[#fff8f5] ${isSelected ? "bg-[#fff4f0]" : ""}`}
                  >
                    <td className="px-4 py-3 align-middle">
                      <input
                        type="checkbox"
                        aria-label={`Označi "${item.title}"`}
                        checked={isSelected}
                        onChange={() =>
                          setSelectedIds((prev) =>
                            prev.includes(item.id) ? prev.filter((id) => id !== item.id) : [...prev, item.id],
                          )
                        }
                        className="size-4"
                      />
                    </td>
                    <td className="px-2 py-3 align-middle">
                      <div className="relative h-12 w-12 overflow-hidden rounded-lg border border-border bg-[#faf9f7]">
                        {item.coverUrl ? (
                          <Image src={item.coverUrl} alt={item.title} fill className="object-cover" sizes="48px" />
                        ) : (
                          <div className="flex h-full w-full items-center justify-center bg-[linear-gradient(135deg,#fff4f0,#ffeee6)]">
                            <span className="text-lg" aria-hidden="true">🛍️</span>
                          </div>
                        )}
                      </div>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <Link href={`/admin/prodavnica/${item.id}`} className="block font-semibold text-foreground hover:text-primary">
                        {item.title}
                      </Link>
                      <p className="mt-0.5 text-xs text-muted-foreground">{item.companyName}</p>
                    </td>
                    <td className="hidden px-4 py-3 align-middle text-muted-foreground lg:table-cell">
                      {item.categoryName || "—"}
                    </td>
                    <td className="px-3 py-3 align-middle text-right font-semibold text-foreground">
                      {formatCurrency(item.price, item.currency)}
                    </td>
                    <td className="px-3 py-3 align-middle text-center">
                      <button
                        type="button"
                        onClick={() =>
                          handleSingleUpdate(
                            item.id,
                            { isFeatured: !item.isFeatured },
                            `Isticanje proizvoda "${item.title}" je ažurirano.`,
                          )
                        }
                        disabled={isPending}
                        title={item.isFeatured ? "Istaknuto — klikni da skineš" : "Klikni da istakneš"}
                        aria-label="Prebaci isticanje"
                        className="inline-flex h-7 w-7 items-center justify-center rounded-full transition hover:bg-amber-50 disabled:opacity-60"
                      >
                        <svg
                          width="16" height="16" viewBox="0 0 24 24"
                          fill={item.isFeatured ? "#f59e0b" : "none"}
                          stroke={item.isFeatured ? "#f59e0b" : "currentColor"}
                          strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                          className={item.isFeatured ? "" : "text-muted-foreground"}
                        >
                          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                        </svg>
                      </button>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <select
                        aria-label={`Status za "${item.title}"`}
                        className={`h-8 rounded-full border px-2.5 text-xs font-semibold transition ${STATUS_COLORS[item.status]}`}
                        value={item.status}
                        onChange={(e) =>
                          handleSingleUpdate(
                            item.id,
                            { status: e.target.value as ProductStatus },
                            `Status proizvoda "${item.title}" je ažuriran.`,
                          )
                        }
                        disabled={isPending}
                      >
                        {STATUS_OPTIONS.map((s) => (
                          <option key={s} value={s}>{STATUS_LABELS[s]}</option>
                        ))}
                      </select>
                    </td>
                    <td className="px-4 py-3 align-middle text-right">
                      <div className="flex items-center justify-end gap-1.5">
                        <Link
                          href={`/admin/prodavnica/${item.id}`}
                          className="inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-white px-3 text-xs font-semibold text-foreground transition hover:border-primary/40 hover:bg-[#fff4f0] hover:text-primary"
                        >
                          Otvori
                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                            <polyline points="9 18 15 12 9 6" />
                          </svg>
                        </Link>
                        <button
                          type="button"
                          onClick={() => handleDelete(item.id, item.title)}
                          disabled={deletingId === item.id}
                          aria-label={`Obriši "${item.title}"`}
                          title="Obriši proizvod"
                          className="inline-flex h-8 items-center gap-1 rounded-full border border-danger/25 bg-danger/5 px-3 text-xs font-semibold text-danger transition hover:bg-danger/10 disabled:opacity-60"
                        >
                          {deletingId === item.id ? (
                            <Spinner className="h-3.5 w-3.5" />
                          ) : (
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                              <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                            </svg>
                          )}
                          Obriši
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </section>
  );
}