"use client";

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

import { AdCampaignHealthBadge } from "@/components/admin/ads/AdCampaignHealthBadge";
import { BulkImportPanel } from "@/components/admin/common/BulkImportPanel";
import type { AdCampaignHealth } from "@/lib/data/ads";

type CampaignRow = {
  id: string;
  name: string;
  slot: string;
  targetLabel: string;
  periodLabel: string;
  status: "DRAFT" | "PENDING_REVIEW" | "ACTIVE" | "PAUSED" | "ENDED";
  priority: number;
  creativesCount: number;
  health: AdCampaignHealth;
};

type AdCampaignListManagerProps = {
  items: CampaignRow[];
};

const CAMPAIGN_STATUS_OPTIONS = ["DRAFT", "ACTIVE", "PAUSED", "ENDED"] as const;

const CAMPAIGN_STATUS_LABELS: Record<CampaignRow["status"], string> = {
  DRAFT: "Nacrt",
  PENDING_REVIEW: "Čeka pregled",
  ACTIVE: "Aktivna",
  PAUSED: "Pauzirana",
  ENDED: "Završena",
};

const campaignImportCsv = `name,slug,slot,status,priority,page_type,city,category,company_slug,click_url
IT Gold Home Hero,it-gold-home-hero,HOME_HERO_OVERLAY,ACTIVE,80,HOME,Beograd,it-kompanije,nova-fabrika-it,https://biznisportal.rs/prijava`;

const campaignImportJson = `[
  {
    "name": "IT Gold Home Hero",
    "slug": "it-gold-home-hero",
    "slot": "HOME_HERO_OVERLAY",
    "status": "ACTIVE",
    "priority": 80,
    "page_type": "HOME",
    "city": "Beograd",
    "category": "it-kompanije",
    "company_slug": "nova-fabrika-it"
  }
]`;

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

export function AdCampaignListManager({ items: initialItems }: AdCampaignListManagerProps) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkStatus, setBulkStatus] = useState("");
  const [bulkPriority, setBulkPriority] = useState("");
  const [priorityDrafts, setPriorityDrafts] = useState<Record<string, string>>(
    Object.fromEntries(initialItems.map((item) => [item.id, String(item.priority)])),
  );
  const [message, setMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const allSelected = items.length > 0 && selectedIds.length === items.length;
  const hasBulkChanges = Boolean(bulkStatus || 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<CampaignRow, "status" | "priority">>,
    successMessage: string,
  ) {
    const response = await fetch("/api/admin/ads/campaigns/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 kampanja nije uspelo.");
    }

    setItems((current) => createNextRows(current, ids, changes));
    setMessage(successMessage);
    router.refresh();
  }

  function handleBulkApply() {
    const changes: Partial<Pick<CampaignRow, "status" | "priority">> = {};

    if (bulkStatus) {
      changes.status = bulkStatus as CampaignRow["status"];
    }

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

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

  function handleInlineUpdate(
    id: string,
    changes: Partial<Pick<CampaignRow, "status" | "priority">>,
    successMessage: string,
  ) {
    startTransition(async () => {
      try {
        await submitUpdate([id], changes, successMessage);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Pojedinačna izmena kampanje nije uspela.");
      }
    });
  }

  return (
    <div className="space-y-6">
      <BulkImportPanel
        title="Masovni uvoz kampanja"
        description="Uvezi više kampanja iz CSV/JSON fajla, a zatim im odmah promeni status ili prioritet iz jedne kontrolne liste."
        endpoint="/api/admin/ads/campaigns/import"
        sampleCsv={campaignImportCsv}
        sampleJson={campaignImportJson}
      />

      <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 i prioritet kampanja sada mogu da se vode direktno iz monetizacione liste.
          </div>
        </div>

        <div className="border-b border-border px-5 py-4">
          <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_180px_auto]">
            <select
              value={bulkStatus}
              onChange={(event) => setBulkStatus(event.target.value)}
              aria-label="Masovni status za kampanje"
              className="inline-select"
            >
              <option value="">Masovni status</option>
              {CAMPAIGN_STATUS_OPTIONS.map((status) => (
                <option key={status} value={status}>
                  {CAMPAIGN_STATUS_LABELS[status]}
                </option>
              ))}
            </select>
            <input
              value={bulkPriority}
              onChange={(event) => setBulkPriority(event.target.value)}
              aria-label="Masovni prioritet za kampanje"
              type="number"
              min={0}
              max={999}
              className="inline-select"
              placeholder="Masovni 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 kampanje"
                  />
                </th>
                {["Kampanja", "Pozicija", "Cilj", "Trajanje", "Sadržaji", "Prikaz", "Status", "Prioritet", "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 kampanju ${item.name}`}
                    />
                  </td>
                  <td className="px-5 py-4 align-top">
                    <div className="min-w-[240px]">
                      <div className="font-semibold text-foreground">{item.name}</div>
                      <div className="mt-1 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                        Pozicija: {item.slot}
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-4 align-top text-sm text-foreground">{item.slot}</td>
                  <td className="px-5 py-4 align-top text-sm text-muted-foreground">
                    {item.targetLabel}
                  </td>
                  <td className="px-5 py-4 align-top text-sm text-muted-foreground">
                    {item.periodLabel}
                  </td>
                  <td className="px-5 py-4 align-top text-sm font-semibold text-foreground">
                    {item.creativesCount}
                  </td>
                  <td className="px-5 py-4 align-top">
                    <AdCampaignHealthBadge health={item.health} />
                  </td>
                  <td className="px-5 py-4 align-top">
                    <select
                      value={item.status}
                      onChange={(event) =>
                        handleInlineUpdate(
                          item.id,
                          { status: event.target.value as CampaignRow["status"] },
                          `Status kampanje "${item.name}" je ažuriran.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Status za kampanju ${item.name}`}
                      className="inline-select"
                    >
                      {CAMPAIGN_STATUS_OPTIONS.map((status) => (
                        <option key={status} value={status}>
                          {CAMPAIGN_STATUS_LABELS[status]}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <input
                      type="number"
                      min={0}
                      max={999}
                      value={priorityDrafts[item.id] ?? String(item.priority)}
                      onChange={(event) =>
                        setPriorityDrafts((current) => ({
                          ...current,
                          [item.id]: event.target.value,
                        }))
                      }
                      onBlur={() => {
                        const nextValue = Number(priorityDrafts[item.id] ?? item.priority);
                        if (!Number.isFinite(nextValue) || nextValue === item.priority) {
                          return;
                        }

                        handleInlineUpdate(
                          item.id,
                          { priority: nextValue },
                          `Prioritet kampanje "${item.name}" je ažuriran.`,
                        );
                      }}
                      aria-label={`Prioritet za kampanju ${item.name}`}
                      className="inline-select w-28"
                    />
                  </td>
                  <td className="px-5 py-4 align-top">
                    <Link href={`/admin/oglasi/kampanje/${item.id}`} className="ghost-button px-4 py-2 text-sm">
                      Otvori
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}