"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 { BulkImportPanel } from "@/components/admin/common/BulkImportPanel";
import { Spinner } from "@/components/common/Spinner";

type RealEstateStatus = "PENDING" | "PUBLISHED" | "SOLD_RENTED" | "EXPIRED" | "REJECTED";

type RealEstateRow = {
  id: string;
  title: string;
  slug: string;
  companyName: string;
  listingFor: string;
  propertyType: string;
  cityName: string;
  priceLabel: string;
  status: RealEstateStatus;
  isFeatured: boolean;
  imageUrl?: string | null;
};

const STATUS_OPTIONS: RealEstateStatus[] = ["PENDING", "PUBLISHED", "SOLD_RENTED", "EXPIRED", "REJECTED"];

const STATUS_LABELS: Record<RealEstateStatus, string> = {
  PENDING: "Na čekanju",
  PUBLISHED: "Objavljeno",
  SOLD_RENTED: "Prodato/Izdato",
  EXPIRED: "Isteklo",
  REJECTED: "Odbijeno",
};

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

const realEstateImportCsv = `title,slug,company_slug,owner_name,owner_phone,listing_for,property_type,status,is_featured,price,currency,area_m2,rooms,address,city,municipality,neighborhood
Penthouse Vracar,penthouse-vracar,atlas-realty,,,PRODAJA,Stan,PUBLISHED,true,420000,EUR,138,4,Milesevska 24,Beograd,Vracar,Crveni krst
Stan od vlasnika,stan-od-vlasnika,,Marko Markovic,+381601234567,PRODAJA,Stan,PENDING,false,145000,EUR,62,2.5,Novi Beograd,Beograd,Novi Beograd,Blok 45`;

const realEstateImportJson = `[
  {
    "title": "Penthouse Vracar",
    "slug": "penthouse-vracar",
    "company_slug": "atlas-realty",
    "owner_name": "",
    "owner_phone": "",
    "listing_for": "PRODAJA",
    "property_type": "Stan",
    "status": "PUBLISHED",
    "is_featured": true,
    "city": "Beograd"
  }
]`;

function createNextRows(
  rows: RealEstateRow[],
  ids: string[],
  changes: Partial<Pick<RealEstateRow, "status" | "isFeatured">>,
) {
  const touched = new Set(ids);
  return rows.map((row) => (touched.has(row.id) ? { ...row, ...changes } : row));
}

export function RealEstateListManager({ items: initialItems }: { items: RealEstateRow[] }) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [message, setMessage] = useState<string | null>(null);
  const [bulkStatus, setBulkStatus] = useState("");
  const [bulkFeatured, setBulkFeatured] = useState<"" | "true" | "false">("");
  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) ||
            i.slug.toLowerCase().includes(q),
        ),
    [items, q, statusFilter],
  );
  const allSelected = filtered.length > 0 && filtered.every((i) => selectedIds.includes(i.id));
  const hasBulkChanges = Boolean(bulkStatus || bulkFeatured);

  async function submitBulkUpdate(
    ids: string[],
    changes: Partial<Pick<RealEstateRow, "status" | "isFeatured">>,
    successMessage: string,
  ) {
    const response = await fetch("/api/admin/real-estates/bulk", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ ids, changes }),
    });
    const payload = (await response.json()) as { message?: string };
    if (!response.ok) throw new Error(payload.message || "Ažuriranje nekretnina nije uspelo.");
    setItems((current) => createNextRows(current, ids, changes));
    setMessage(successMessage);
    router.refresh();
  }

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

  function handleSingleUpdate(
    id: string,
    changes: Partial<Pick<RealEstateRow, "status" | "isFeatured">>,
    successMessage: string,
  ) {
    startTransition(async () => {
      try {
        await submitBulkUpdate([id], changes, successMessage);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Inline izmena nije uspela.");
      }
    });
  }

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

  return (
    <div className="space-y-6">
      <BulkImportPanel
        title="Masovni import nekretnina"
        description="Unesi ili ažuriraj veliki broj oglasa za prodaju i izdavanje iz jednog CSV/JSON fajla, pa ih odmah promoviši ili objavi direktno iz liste."
        endpoint="/api/admin/real-estates/import"
        sampleCsv={realEstateImportCsv}
        sampleJson={realEstateImportJson}
      />

      <div 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">
              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 oglase…"
                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="border-b border-border px-5 py-4">
          <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto_auto]">
            <select value={bulkStatus} onChange={(e) => setBulkStatus(e.target.value)} aria-label="Masovni status" className="inline-select">
              <option value="">Masovni status</option>
              {STATUS_OPTIONS.map((s) => (
                <option key={s} value={s}>{STATUS_LABELS[s]}</option>
              ))}
            </select>
            <select value={bulkFeatured} onChange={(e) => setBulkFeatured(e.target.value as "" | "true" | "false")} aria-label="Masovno isticanje" className="inline-select">
              <option value="">Masovno isticanje</option>
              <option value="true">Istaknuto</option>
              <option value="false">Standardno</option>
            </select>
            <button
              type="button"
              onClick={handleBulkApply}
              disabled={isPending || selectedIds.length === 0 || !hasBulkChanges}
              className="primary-button inline-flex items-center justify-center gap-2"
            >
              {isPending && selectedIds.length ? <Spinner className="h-4 w-4" /> : null}
              Primeni na označene
            </button>
            <BulkDeleteButton
              endpoint="/api/admin/real-estates/bulk"
              ids={selectedIds}
              itemLabel="nekretnina"
              onDeleted={(ids) => {
                setItems((current) => current.filter((row) => !ids.includes(row.id)));
                setSelectedIds([]);
                router.refresh();
              }}
            />
          </div>
          {message ? <p className="mt-3 text-sm font-medium text-primary">{message}</p> : null}
        </div>

        {/* 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 nekretnina"}
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              {q || statusFilter ? "Promeni pretragu ili filter." : "Dodaj prvi oglas ili uvezi CSV."}
            </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" className="size-4" />
                  </th>
                  <th className="px-4 py-3 text-left">Oglas</th>
                  <th className="hidden px-4 py-3 text-left lg:table-cell">Kompanija</th>
                  <th className="hidden px-4 py-3 text-left xl:table-cell">Tip</th>
                  <th className="hidden px-4 py-3 text-left lg:table-cell">Grad</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" checked={isSelected} onChange={() => setSelectedIds((prev) => prev.includes(item.id) ? prev.filter((id) => id !== item.id) : [...prev, item.id])} aria-label={`Označi ${item.title}`} className="size-4" />
                      </td>
                      <td className="px-4 py-3 align-middle">
                        <div className="flex items-center gap-3">
                          <div className="relative h-12 w-14 shrink-0 overflow-hidden rounded-lg border border-border bg-[linear-gradient(135deg,#fff4ee,#f7d4c6)]">
                            {item.imageUrl ? <Image src={item.imageUrl} alt={item.title} fill className="object-cover" sizes="56px" /> : null}
                          </div>
                          <div className="min-w-0">
                            <Link href={`/admin/nekretnine/${item.id}`} className="block truncate font-semibold text-foreground hover:text-primary">{item.title}</Link>
                            <div className="truncate text-[0.7rem] uppercase tracking-[0.12em] text-muted-foreground">/{item.slug}</div>
                          </div>
                        </div>
                      </td>
                      <td className="hidden px-4 py-3 align-middle text-muted-foreground lg:table-cell">{item.companyName || "—"}</td>
                      <td className="hidden px-4 py-3 align-middle text-muted-foreground xl:table-cell">
                        {[item.listingFor, item.propertyType].filter(Boolean).join(" • ") || "—"}
                      </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-right font-semibold text-foreground">{item.priceLabel}</td>
                      <td className="px-3 py-3 align-middle text-center">
                        <button
                          type="button"
                          onClick={() => handleSingleUpdate(item.id, { isFeatured: !item.isFeatured }, `Isticanje je ažurirano za ${item.title}.`)}
                          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
                          value={item.status}
                          onChange={(e) => handleSingleUpdate(item.id, { status: e.target.value as RealEstateStatus }, `Status je ažuriran za ${item.title}.`)}
                          disabled={isPending}
                          aria-label={`Status za ${item.title}`}
                          className={`h-8 rounded-full border px-2.5 text-xs font-semibold transition ${STATUS_COLORS[item.status]}`}
                        >
                          {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/nekretnine/${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 nekretninu"
                            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>
        )}
      </div>
    </div>
  );
}