"use client";

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

import { BulkImportPanel } from "@/components/admin/common/BulkImportPanel";

type CreativeRow = {
  id: string;
  title: string;
  type: "IMAGE" | "VIDEO" | "HTML" | "ADSENSE";
  campaignId: string;
  campaignName: string;
  campaignSlot: string;
  mediaLabel: string;
  mediaUrl?: string | null;
};

type CampaignOption = {
  id: string;
  name: string;
  slot: string | null;
  status: string;
};

type CreativeListManagerProps = {
  items: CreativeRow[];
  campaigns: CampaignOption[];
};

const CREATIVE_TYPE_OPTIONS = ["IMAGE", "VIDEO", "HTML", "ADSENSE"] as const;

const creativeImportCsv = `campaign_slug,title,type,media_id,video_url,html
platinum-growth-home,Hero image varijanta,IMAGE,,
platinum-growth-home,Hero video varijanta,VIDEO,,https://cdn.biznisportal.rs/demo/hero.mp4,
platinum-growth-home,Hero HTML varijanta,HTML,,,<div class="promo-banner">Specijalna ponuda</div>`;

const creativeImportJson = `[
  {
    "campaign_slug": "platinum-growth-home",
    "title": "Hero image varijanta",
    "type": "IMAGE",
    "media_id": "cm-demo-image"
  }
]`;

function createNextRows(
  rows: CreativeRow[],
  ids: string[],
  changes: Partial<Pick<CreativeRow, "campaignId" | "type">>,
  campaigns: CampaignOption[],
) {
  const touched = new Set(ids);
  const campaignLookup = new Map(campaigns.map((campaign) => [campaign.id, campaign]));

  return rows.map((row) => {
    if (!touched.has(row.id)) {
      return row;
    }

    const nextCampaignId = changes.campaignId ?? row.campaignId;
    const nextCampaign = campaignLookup.get(nextCampaignId);

    return {
      ...row,
      ...changes,
      campaignId: nextCampaignId,
      campaignName: nextCampaign?.name ?? row.campaignName,
      campaignSlot: nextCampaign?.slot ?? row.campaignSlot,
    };
  });
}

export function CreativeListManager({
  items: initialItems,
  campaigns,
}: CreativeListManagerProps) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [bulkCampaignId, setBulkCampaignId] = useState("");
  const [bulkType, setBulkType] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const allSelected = items.length > 0 && selectedIds.length === items.length;
  const hasBulkChanges = Boolean(bulkCampaignId || bulkType);

  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<CreativeRow, "campaignId" | "type">>,
    successMessage: string,
  ) {
    const response = await fetch("/api/admin/ads/creatives/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 kreativa nije uspelo.");
    }

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

  function handleInlineUpdate(
    id: string,
    changes: Partial<Pick<CreativeRow, "campaignId" | "type">>,
    successMessage: string,
  ) {
    startTransition(async () => {
      try {
        await submitUpdate([id], changes, successMessage);
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Inline izmena kreative nije uspela.");
      }
    });
  }

  function handleBulkApply() {
    const changes: Partial<Pick<CreativeRow, "campaignId" | "type">> = {};

    if (bulkCampaignId) {
      changes.campaignId = bulkCampaignId;
    }

    if (bulkType) {
      changes.type = bulkType as CreativeRow["type"];
    }

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

  return (
    <div className="space-y-6">
      <BulkImportPanel
        title="Masovni import kreativa"
        description="Uvezi veći broj kreativnih varijanti po kampanji, pa ih odmah rasporedi ili prebaci između kampanja direktno iz komandne liste."
        endpoint="/api/admin/ads/creatives/import"
        sampleCsv={creativeImportCsv}
        sampleJson={creativeImportJson}
      />

      <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">
            Kreative se sada mogu masovno prebacivati između kampanja i tipova bez otvaranja detaljnog editora.
          </div>
        </div>

        <div className="border-b border-border px-5 py-4">
          <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_220px_auto]">
            <select
              value={bulkCampaignId}
              onChange={(event) => setBulkCampaignId(event.target.value)}
              aria-label="Bulk kampanja za kreative"
              className="inline-select"
            >
              <option value="">Bulk kampanja</option>
              {campaigns.map((campaign) => (
                <option key={campaign.id} value={campaign.id}>
                  {campaign.name} · {campaign.slot}
                </option>
              ))}
            </select>
            <select
              value={bulkType}
              onChange={(event) => setBulkType(event.target.value)}
              aria-label="Bulk tip za kreative"
              className="inline-select"
            >
              <option value="">Bulk tip</option>
              {CREATIVE_TYPE_OPTIONS.map((type) => (
                <option key={type} value={type}>
                  {type}
                </option>
              ))}
            </select>
            <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 kreative"
                  />
                </th>
                {["Kreativa", "Kampanja", "Tip", "Asset", "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 kreativu ${item.title}`}
                    />
                  </td>
                  <td className="px-5 py-4 align-top">
                    <div className="min-w-[260px]">
                      <div className="font-semibold text-foreground">{item.title}</div>
                      <div className="mt-1 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                        ID: {item.id}
                      </div>
                    </div>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <select
                      value={item.campaignId}
                      onChange={(event) =>
                        handleInlineUpdate(
                          item.id,
                          { campaignId: event.target.value },
                          `Kampanja za kreativu "${item.title}" je ažurirana.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Kampanja za kreativu ${item.title}`}
                      className="inline-select min-w-[250px]"
                    >
                      {campaigns.map((campaign) => (
                        <option key={campaign.id} value={campaign.id}>
                          {campaign.name} · {campaign.slot}
                        </option>
                      ))}
                    </select>
                    <div className="mt-2 text-xs text-muted-foreground">{item.campaignSlot}</div>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <select
                      value={item.type}
                      onChange={(event) =>
                        handleInlineUpdate(
                          item.id,
                          { type: event.target.value as CreativeRow["type"] },
                          `Tip kreative "${item.title}" je ažuriran.`,
                        )
                      }
                      disabled={isPending}
                      aria-label={`Tip za kreativu ${item.title}`}
                      className="inline-select"
                    >
                      {CREATIVE_TYPE_OPTIONS.map((type) => (
                        <option key={type} value={type}>
                          {type}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <div className="flex min-w-[220px] items-center gap-3">
                      {item.mediaUrl ? (
                        <Image
                          src={item.mediaUrl}
                          alt={item.title}
                          width={84}
                          height={64}
                          className="h-14 w-20 rounded-[1rem] object-cover"
                        />
                      ) : (
                        <div className="flex h-14 w-20 items-center justify-center rounded-[1rem] border border-dashed border-border bg-background/70 text-[11px] text-muted-foreground">
                          Bez preview-a
                        </div>
                      )}
                      <div className="text-sm text-muted-foreground">{item.mediaLabel}</div>
                    </div>
                  </td>
                  <td className="px-5 py-4 align-top">
                    <Link href={`/admin/oglasi/kreativi/${item.id}`} className="ghost-button">
                      Otvori detalj
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}