"use client";

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

import { BulkImportPanel } from "@/components/admin/common/BulkImportPanel";
import { getTierAdminLabel } from "@/lib/module-formatters";

type PlanRow = {
  id: string;
  slug: string;
  nameSr: string;
  tier: "STANDARD" | "BRONZE" | "SILVER" | "GOLD" | "PLATINUM";
  isActive: boolean;
  isFeaturedDefault: boolean;
  priorityDefault: number;
  durationDays: number | null;
  priceRsd: number | null;
  priceEur: number | null;
};

type PlanListManagerProps = {
  items: PlanRow[];
};

const PLAN_TIER_OPTIONS = ["STANDARD", "BRONZE", "SILVER", "GOLD", "PLATINUM"] as const;

const planImportCsv = `name_sr,slug,tier,is_active,is_featured_default,priority_default,duration_days,price_rsd,price_eur,max_gallery_images,max_categories
Gold,gold,GOLD,true,true,70,30,45000,379,18,6`;

const planImportJson = `[
  {
    "name_sr": "Gold",
    "slug": "gold",
    "tier": "GOLD",
    "is_active": true,
    "priority_default": 70,
    "duration_days": 30
  }
]`;

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

function formatMoney(rsd: number | null, eur: number | null) {
  const parts = [];
  if (rsd !== null) {
    parts.push(`${rsd.toLocaleString("sr-Latn-RS")} RSD`);
  }
  if (eur !== null) {
    parts.push(`${eur} EUR`);
  }

  return parts.join(" / ") || "Cena nije definisana";
}

export function PlanListManager({ items: initialItems }: PlanListManagerProps) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkTier, setBulkTier] = useState("");
  const [bulkIsActive, setBulkIsActive] = useState<"" | "true" | "false">("");
  const [bulkIsFeatured, setBulkIsFeatured] = useState<"" | "true" | "false">("");
  const [bulkPriority, setBulkPriority] = useState("");
  const [priorityDrafts, setPriorityDrafts] = useState<Record<string, string>>(
    Object.fromEntries(initialItems.map((item) => [item.id, String(item.priorityDefault)])),
  );
  const [message, setMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const allSelected = items.length > 0 && selectedIds.length === items.length;
  const hasBulkChanges = Boolean(bulkTier || bulkIsActive || bulkIsFeatured || bulkPriority);

  function toggleSelection(id: string) {
    setSelectedIds((current) =>
      current.includes(id) ? current.filter((item) => item !== id) : [...current, id],
    );
  }

  function toggleAll() {
    setSelectedIds(allSelected ? [] : items.map((item) => item.id));
  }

  async function submitUpdate(
    ids: string[],
    changes: Partial<Pick<PlanRow, "tier" | "isActive" | "isFeaturedDefault" | "priorityDefault">>,
    successMessage: string,
  ) {
    const response = await fetch("/api/admin/plans/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 paketa nije uspelo.");
    }

    setItems((current) => createNextRows(current, ids, changes));
    if (typeof changes.priorityDefault === "number") {
      setPriorityDrafts((current) =>
        Object.fromEntries(
          Object.entries(current).map(([key, value]) => [
            key,
            ids.includes(key) ? String(changes.priorityDefault) : value,
          ]),
        ),
      );
    }
    setMessage(successMessage);
    router.refresh();
  }

  function handleInlineUpdate(
    id: string,
    changes: Partial<Pick<PlanRow, "tier" | "isActive" | "isFeaturedDefault" | "priorityDefault">>,
    successMessage: string,
  ) {
    startTransition(async () => {
      try {
        await submitUpdate([id], changes, successMessage);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Inline izmena paketa nije uspela.");
      }
    });
  }

  function handleBulkApply() {
    const changes: Partial<
      Pick<PlanRow, "tier" | "isActive" | "isFeaturedDefault" | "priorityDefault">
    > = {};

    if (bulkTier) {
      changes.tier = bulkTier as PlanRow["tier"];
    }

    if (bulkIsActive) {
      changes.isActive = bulkIsActive === "true";
    }

    if (bulkIsFeatured) {
      changes.isFeaturedDefault = bulkIsFeatured === "true";
    }

    if (bulkPriority) {
      changes.priorityDefault = Number(bulkPriority);
    }

    startTransition(async () => {
      try {
        await submitUpdate(
          selectedIds,
          changes,
          `Masovna izmena je sačuvana za ${selectedIds.length} paketa.`,
        );
        setSelectedIds([]);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Masovna izmena paketa nije uspela.");
      }
    });
  }

  return (
    <div className="space-y-6">
      <BulkImportPanel
        title="Masovni import paketa"
        description="Uvezi nove komercijalne pakete iz CSV/JSON fajla, a zatim odmah podesi nivo paketa, aktivnost i prioritet direktno iz komandne liste."
        endpoint="/api/admin/plans/import"
        sampleCsv={planImportCsv}
        sampleJson={planImportJson}
      />

      <div className="admin-toolbar overflow-hidden rounded-[2rem]">
        <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>
          </div>
          <div className="text-sm text-muted-foreground">
            Status komercijalnih paketa sada može da se vodi iz jedne liste bez ulaska u svaku karticu posebno.
          </div>
        </div>

        <div className="border-b border-border px-5 py-4">
          <div className="grid gap-3 xl:grid-cols-[180px_180px_220px_180px_auto]">
            <select
              value={bulkTier}
              onChange={(event) => setBulkTier(event.target.value)}
              aria-label="Masovni nivo paketa"
              className="inline-select"
            >
              <option value="">Masovni paket</option>
              {PLAN_TIER_OPTIONS.map((tier) => (
                <option key={tier} value={tier}>
                  {getTierAdminLabel(tier)}
                </option>
              ))}
            </select>
            <select
              value={bulkIsActive}
              onChange={(event) =>
                setBulkIsActive(event.target.value as "" | "true" | "false")
              }
              aria-label="Bulk aktivnost za pakete"
              className="inline-select"
            >
              <option value="">Bulk aktivnost</option>
              <option value="true">Aktivno</option>
              <option value="false">Neaktivno</option>
            </select>
            <select
              value={bulkIsFeatured}
              onChange={(event) =>
                setBulkIsFeatured(event.target.value as "" | "true" | "false")
              }
              aria-label="Bulk isticanje za pakete"
              className="inline-select"
            >
              <option value="">Bulk isticanje</option>
              <option value="true">Istaknuto po defaultu</option>
              <option value="false">Standardno</option>
            </select>
            <input
              value={bulkPriority}
              onChange={(event) => setBulkPriority(event.target.value)}
              aria-label="Bulk prioritet za pakete"
              type="number"
              min={0}
              max={999}
              className="inline-select"
              placeholder="Bulk prioritet"
            />
            <button
              type="button"
              onClick={handleBulkApply}
              disabled={isPending || selectedIds.length === 0 || !hasBulkChanges}
              className="primary-button"
            >
              {isPending ? "Čuvanje..." : "Primeni na označene"}
            </button>
          </div>
          {message ? <p className="mt-3 text-sm text-muted-foreground">{message}</p> : null}
        </div>

        <div className="overflow-x-auto">
          <table className="admin-data-table text-left">
            <thead className="bg-white/75">
              <tr>
                <th className="px-5 py-4">
                  <input
                    type="checkbox"
                    checked={allSelected}
                    onChange={toggleAll}
                    aria-label="Označi sve pakete"
                  />
                </th>
                {["Paket", "Nivo paketa", "Aktivnost", "Isticanje", "Prioritet", "Cena", "Akcija"].map(
                  (column) => (
                    <th
                      key={column}
                      className="px-5 py-4 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground"
                    >
                      {column}
                    </th>
                  ),
                )}
              </tr>
            </thead>
            <tbody className="divide-y divide-border/70">
              {items.map((item) => (
                <tr key={item.id} className="bg-white/55">
                  <td className="px-5 py-4 align-top">
                    <input
                      type="checkbox"
                      checked={selectedIds.includes(item.id)}
                      onChange={() => toggleSelection(item.id)}
                      aria-label={`Označi paket ${item.nameSr}`}
                    />
                  </td>
                  <td className="px-5 py-4 align-top">
                    <div className="min-w-[220px]">
                      <div className="font-semibold text-foreground">{item.nameSr}</div>
                      <div className="mt-1 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                        {item.slug}
                      </div>
                      <div className="mt-2 text-sm text-muted-foreground">
                        {item.durationDays ? `${item.durationDays} dana` : "Bez trajanja"}
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <select
                      value={item.tier}
                      onChange={(event) =>
                        handleInlineUpdate(
                          item.id,
                          { tier: event.target.value as PlanRow["tier"] },
                          `Nivo paketa "${item.nameSr}" je ažuriran.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Nivo paketa za ${item.nameSr}`}
                      className="inline-select"
                    >
                      {PLAN_TIER_OPTIONS.map((tier) => (
                        <option key={tier} value={tier}>
                          {getTierAdminLabel(tier)}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <button
                      type="button"
                      onClick={() =>
                        handleInlineUpdate(
                          item.id,
                          { isActive: !item.isActive },
                          `Aktivnost paketa "${item.nameSr}" je ažurirana.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Aktivnost za paket ${item.nameSr}`}
                      className="inline-toggle"
                      data-active={item.isActive}
                      data-tone={item.isActive ? "success" : "neutral"}
                    >
                      {item.isActive ? "Aktivan" : "Neaktivan"}
                    </button>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <button
                      type="button"
                      onClick={() =>
                        handleInlineUpdate(
                          item.id,
                          { isFeaturedDefault: !item.isFeaturedDefault },
                          `Default isticanje paketa "${item.nameSr}" je ažurirano.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Isticanje za paket ${item.nameSr}`}
                      className="inline-toggle"
                      data-active={item.isFeaturedDefault}
                      data-tone="accent"
                    >
                      {item.isFeaturedDefault ? "Istaknuto" : "Standardno"}
                    </button>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <div className="flex min-w-[200px] gap-2">
                      <input
                        value={priorityDrafts[item.id] ?? ""}
                        onChange={(event) =>
                          setPriorityDrafts((current) => ({
                            ...current,
                            [item.id]: event.target.value,
                          }))
                        }
                        aria-label={`Prioritet za paket ${item.nameSr}`}
                        type="number"
                        min={0}
                        max={999}
                        className="inline-select"
                      />
                      <button
                        type="button"
                        onClick={() =>
                          handleInlineUpdate(
                            item.id,
                            { priorityDefault: Number(priorityDrafts[item.id] ?? 0) },
                            `Prioritet paketa "${item.nameSr}" je ažuriran.`,
                          )
                        }
                        disabled={isPending}
                        className="ghost-button px-4"
                      >
                        Sačuvaj
                      </button>
                    </div>
                  </td>
                  <td className="px-5 py-4 align-top text-sm text-muted-foreground">
                    {formatMoney(item.priceRsd, item.priceEur)}
                  </td>
                  <td className="px-5 py-4 align-top">
                    <Link href={`#plan-detail-${item.id}`} className="ghost-button">
                      Detaljni editor
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}