"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 JobStatus = "DRAFT" | "PUBLISHED" | "PAUSED" | "FILLED" | "EXPIRED";

type JobRow = {
  id: string;
  title: string;
  companyName: string;
  cityName: string;
  status: JobStatus;
  isRemote: boolean;
  coverUrl?: string | null;
};

const STATUS_OPTIONS: JobStatus[] = ["DRAFT", "PUBLISHED", "PAUSED", "FILLED", "EXPIRED"];

const STATUS_LABELS: Record<JobStatus, string> = {
  DRAFT: "Nacrt",
  PUBLISHED: "Objavljeno",
  PAUSED: "Pauzirano",
  FILLED: "Popunjeno",
  EXPIRED: "Isteklo",
};

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

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

export function JobListManager({ items: initialItems }: { items: JobRow[] }) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkStatus, setBulkStatus] = useState("");
  const [bulkRemote, setBulkRemote] = 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.cityName ?? "").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<JobRow>, successMessage: string) {
    const response = await fetch("/api/admin/jobs/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 poslova nije uspela.");
    setItems((current) => applyChanges(current, ids, changes));
    setMessage(successMessage);
    router.refresh();
  }

  function handleSingleUpdate(id: string, changes: Partial<JobRow>, 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<JobRow> = {};
    if (bulkStatus) changes.status = bulkStatus as JobStatus;
    if (bulkRemote) changes.isRemote = bulkRemote === "true";
    startTransition(async () => {
      try {
        await submit(selectedIds, changes, `Masovna izmena je sačuvana za ${selectedIds.length} poslova.`);
        setSelectedIds([]);
        setBulkStatus("");
        setBulkRemote("");
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Masovna izmena nije uspela.");
      }
    });
  }

  function handleDelete(id: string, title: string) {
    if (!window.confirm(`Obrisati posao „${title}"? Ova radnja se ne može poništiti.`)) return;
    setDeletingId(id);
    startTransition(async () => {
      try {
        const res = await fetch("/api/admin/jobs/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(`Posao „${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 + pretraga/filter */}
      <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">
            Remote: {items.filter((i) => i.isRemote).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 poslove…"
              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={bulkRemote} onChange={(e) => setBulkRemote(e.target.value as "" | "true" | "false")}>
          <option value="">Masovni režim rada</option>
          <option value="true">Rad na daljinu</option>
          <option value="false">Rad iz kancelarije</option>
        </select>
        <button
          type="button"
          className="primary-button justify-center inline-flex items-center gap-2"
          onClick={handleBulkUpdate}
          disabled={isPending || !selectedIds.length || (!bulkStatus && !bulkRemote)}
        >
          {isPending && selectedIds.length ? <Spinner className="h-4 w-4" /> : null}
          Primeni na označene
        </button>
        <BulkDeleteButton
          endpoint="/api/admin/jobs/bulk"
          ids={selectedIds}
          itemLabel="poslova"
          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 poslova"}
          </p>
          <p className="mt-2 text-sm text-muted-foreground">
            {q || statusFilter ? "Promeni pretragu ili filter." : "Kreiraj prvi posao 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 poslove"
                    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">Grad</th>
                <th className="px-3 py-3 text-center">Režim</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/poslovi/${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.cityName || "—"}
                    </td>
                    <td className="px-3 py-3 align-middle text-center">
                      <button
                        type="button"
                        onClick={() =>
                          handleSingleUpdate(
                            item.id,
                            { isRemote: !item.isRemote },
                            `Režim rada za "${item.title}" je ažuriran.`,
                          )
                        }
                        disabled={isPending}
                        title={item.isRemote ? "Rad na daljinu — klikni za on-site" : "On-site — klikni za remote"}
                        className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold transition disabled:opacity-60 ${
                          item.isRemote
                            ? "border-primary/25 bg-primary/8 text-primary"
                            : "border-border bg-white text-muted-foreground hover:border-primary/20"
                        }`}
                      >
                        {item.isRemote ? "Remote" : "On-site"}
                      </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 JobStatus },
                            `Status posla "${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/poslovi/${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 posao"
                          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>
  );
}