"use client";

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

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

type DealRow = {
  id: string;
  title: string;
  companyName: string;
  discount: string | null;
  category: string | null;
  status: "DRAFT" | "PUBLISHED" | "HIDDEN" | "EXPIRED";
  coverUrl: string | null;
  validUntil: string | null; // ISO string
};

const STATUS_OPTIONS = ["DRAFT", "PUBLISHED", "HIDDEN", "EXPIRED"] as const;

const STATUS_LABELS: Record<string, string> = {
  DRAFT: "Nacrt",
  PUBLISHED: "Objavljeno",
  HIDDEN: "Skriveno",
  EXPIRED: "Isteklo",
};

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

function isExpired(validUntil: string | null) {
  if (!validUntil) return false;
  return new Date(validUntil) < new Date();
}

function formatDate(iso: string | null) {
  if (!iso) return "—";
  return new Date(iso).toLocaleDateString("sr-Latn", { day: "2-digit", month: "2-digit", year: "numeric" });
}

export function DealListManager({ items: initialItems }: { items: DealRow[] }) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkStatus, setBulkStatus] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const allSelected = items.length > 0 && selectedIds.length === items.length;

  function handleDelete(id: string, title: string) {
    if (!window.confirm(`Obrisati akciju „${title}"? Ova radnja se ne može poništiti.`)) return;
    setDeletingId(id);
    startTransition(async () => {
      try {
        const res = await fetch(`/api/admin/deals/${id}`, { method: "DELETE" });
        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(`Akcija „${title}" je obrisana.`);
        router.refresh();
      } catch (err) {
        setMessage(err instanceof Error ? err.message : "Brisanje nije uspelo.");
      } finally {
        setDeletingId(null);
      }
    });
  }

  async function applyBulkStatus() {
    if (!bulkStatus || !selectedIds.length) return;

    startTransition(async () => {
      try {
        const res = await fetch("/api/admin/deals/bulk", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ ids: selectedIds, status: bulkStatus }),
        });
        if (!res.ok) throw new Error("Greška pri masovnoj izmeni.");
        setItems((prev) =>
          prev.map((item) =>
            selectedIds.includes(item.id)
              ? { ...item, status: bulkStatus as DealRow["status"] }
              : item,
          ),
        );
        setMessage(`Status je ažuriran za ${selectedIds.length} akcija.`);
        setSelectedIds([]);
        router.refresh();
      } catch (err) {
        setMessage(err instanceof Error ? err.message : "Greška.");
      }
    });
  }

  async function updateSingleStatus(id: string, status: DealRow["status"]) {
    startTransition(async () => {
      try {
        const res = await fetch("/api/admin/deals/bulk", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ ids: [id], status }),
        });
        if (!res.ok) throw new Error("Greška.");
        setItems((prev) =>
          prev.map((item) => (item.id === id ? { ...item, status } : item)),
        );
        router.refresh();
      } catch (err) {
        setMessage(err instanceof Error ? err.message : "Greška.");
      }
    });
  }

  return (
    <section className="admin-toolbar overflow-hidden rounded-[2rem]">
      {/* ── Header bar ──────────────────────────────── */}
      <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">
            Aktivno: {items.filter((i) => i.status === "PUBLISHED" && !isExpired(i.validUntil)).length}
          </span>
          <span className="admin-chip text-red-500">
            Isteklo: {items.filter((i) => isExpired(i.validUntil)).length}
          </span>
        </div>
        <p className="text-sm text-muted-foreground">
          Upravljajte akcijama i popustima sa inline kontrolom statusa.
        </p>
      </div>

      {/* ── Bulk actions ─────────────────────────────── */}
      <div className="grid gap-3 border-b border-border px-5 py-4 lg:grid-cols-[1fr_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>
        <button
          type="button"
          className="primary-button justify-center"
          onClick={applyBulkStatus}
          disabled={isPending || !selectedIds.length || !bulkStatus}
        >
          Primeni na označene
        </button>
      </div>

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

      {/* ── Proper table ───────────────────────────────────────── */}
      {items.length === 0 ? (
        <div className="px-6 py-16 text-center">
          <p className="text-lg font-semibold text-foreground">Nema akcija</p>
          <p className="mt-2 text-sm text-muted-foreground">
            Kreirajte prvu akciju koristeći dugme 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 ? [] : items.map((i) => i.id))
                    }
                    aria-label="Označi sve akcije"
                    className="size-4"
                  />
                </th>
                <th className="w-16 px-2 py-3 text-left">Slika</th>
                <th className="px-4 py-3 text-left">Naslov / Kompanija</th>
                <th className="hidden px-4 py-3 text-left md:table-cell">Kategorija</th>
                <th className="px-3 py-3 text-center">Popust</th>
                <th className="hidden px-4 py-3 text-left lg:table-cell">Važi do</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>
              {items.map((item) => {
                const expired = isExpired(item.validUntil);
                const isSelected = selectedIds.includes(item.id);
                return (
                  <tr
                    key={item.id}
                    className={`border-b border-border/60 transition hover:bg-[#fff8f5] ${
                      isSelected ? "bg-[#fff4f0]" : ""
                    }`}
                  >
                    {/* Checkbox */}
                    <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>

                    {/* Cover */}
                    <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>

                    {/* Title + Company */}
                    <td className="px-4 py-3 align-middle">
                      <Link
                        href={`/admin/akcije/${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>

                    {/* Category — hidden on mobile, shown md+ */}
                    <td className="hidden px-4 py-3 align-middle text-muted-foreground md:table-cell">
                      {item.category || "—"}
                    </td>

                    {/* Discount badge */}
                    <td className="px-3 py-3 align-middle text-center">
                      {item.discount ? (
                        <span className="inline-flex items-center rounded-full border border-primary/25 bg-primary/8 px-2.5 py-1 text-xs font-bold text-primary">
                          {item.discount}
                        </span>
                      ) : (
                        <span className="text-xs text-muted-foreground">—</span>
                      )}
                    </td>

                    {/* Valid until — hidden on small screens, shown lg+ */}
                    <td className="hidden px-4 py-3 align-middle lg:table-cell">
                      <span className={expired ? "text-red-600" : "text-foreground"}>
                        {formatDate(item.validUntil)}
                      </span>
                      {expired ? (
                        <span className="ml-2 inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-[10px] font-semibold text-red-600">
                          Isteklo
                        </span>
                      ) : null}
                    </td>

                    {/* Status — inline select */}
                    <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) =>
                          updateSingleStatus(item.id, e.target.value as DealRow["status"])
                        }
                        disabled={isPending}
                      >
                        {STATUS_OPTIONS.map((s) => (
                          <option key={s} value={s}>
                            {STATUS_LABELS[s]}
                          </option>
                        ))}
                      </select>
                    </td>

                    {/* Actions */}
                    <td className="px-4 py-3 align-middle text-right">
                      <div className="flex items-center justify-end gap-1.5">
                        <Link
                          href={`/admin/akcije/${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 akciju"
                          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>
  );
}