"use client";

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

import { ThreeDIcon } from "@/components/public/common/ThreeDIcon";
import {
  extractPortalMediaPayload,
  getPortalMediaMaterialLabel,
  getPortalRequestStatusLabel,
  getPortalRequestTypeLabel,
  resolvePortalMediaSources,
} from "@/lib/portal-request-presenters";
import { getTierAdminLabel } from "@/lib/module-formatters";

type PortalRequestRow = {
  id: string;
  type: string;
  status: "NEW" | "IN_REVIEW" | "APPROVED" | "REJECTED" | "COMPLETED";
  title: string;
  message: string;
  payload?: unknown;
  createdAt: Date | string;
  reviewedAt: Date | string | null;
  resolutionNote: string | null;
  company: { id: string; name: string; slug: string };
  clientAccount?: { id: string; email: string; name: string } | null;
  reviewedBy?: { id: string; email: string; name: string | null } | null;
  requestedPlan?: { id: string; nameSr: string; tier: string } | null;
  requestedPlacement?: { id: string; label: string | null; position: string } | null;
  media: Array<{
    id: string;
    media: {
      id: string;
      url: string;
      alt: string | null;
      mimeType?: string | null;
      fileSize?: number | null;
    };
  }>;
};

function formatDate(value?: Date | string | null) {
  if (!value) {
    return "Nije obrađeno";
  }

  return new Intl.DateTimeFormat("sr-Latn-RS", {
    day: "2-digit",
    month: "long",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));
}

function formatFileSize(value?: number | null) {
  if (!value) {
    return null;
  }

  if (value < 1024 * 1024) {
    return `${Math.max(1, Math.round(value / 102.4) / 10)} KB`;
  }

  return `${Math.round(value / 104857.6) / 10} MB`;
}

function isRenderableImage(mimeType?: string | null, url?: string | null) {
  if (mimeType?.startsWith("image/")) {
    return true;
  }

  return Boolean(url && /\.(png|jpe?g|webp|gif|svg)$/i.test(url));
}

export function PortalRequestListManager({ items: initialItems }: { items: PortalRequestRow[] }) {
  const router = useRouter();
  const [items, setItems] = useState(initialItems);
  const [isPending, startTransition] = useTransition();
  const [message, setMessage] = useState<string | null>(null);
  const [notes, setNotes] = useState<Record<string, string>>({});
  const summary = {
    total: items.length,
    pending: items.filter((item) => item.status === "NEW" || item.status === "IN_REVIEW").length,
    approved: items.filter((item) => item.status === "APPROVED" || item.status === "COMPLETED").length,
    withMedia: items.filter((item) => item.media.length > 0).length,
  };

  function handleReview(id: string, status: PortalRequestRow["status"]) {
    startTransition(async () => {
      try {
        const response = await fetch(`/api/admin/portal-requests/${id}`, {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({
            status,
            resolutionNote: notes[id] || undefined,
          }),
        });

        const result = (await response.json()) as { item?: PortalRequestRow; message?: string };
        if (!response.ok || !result.item) {
          throw new Error(result.message || "Obrada portal zahteva nije uspela.");
        }

        setItems((current) =>
          current.map((item) => (item.id === result.item!.id ? result.item! : item)),
        );
        setMessage(`Zahtev je ažuriran na status ${getPortalRequestStatusLabel(status)}.`);
        router.refresh();
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Obrada zahteva nije uspela.");
      }
    });
  }

  return (
    <section className="admin-command-shell">
      <div className="admin-command-header border-b border-border/80 pb-5">
        <div>
          <p className="eyebrow">Portal zahtevi</p>
          <p className="mt-2 text-sm text-muted-foreground">
            Klijentski zahtevi za izmene profila, upload medije, planove i isticanja ulaze ovde na pregled i odobrenje.
          </p>
        </div>
        <div className="admin-kpi-grid sm:max-w-[540px]">
          <div className="admin-kpi-card">
            <div className="admin-kpi-label">Ukupno</div>
            <div className="admin-kpi-value">{summary.total}</div>
          </div>
          <div className="admin-kpi-card">
            <div className="admin-kpi-label">Na obradi</div>
            <div className="admin-kpi-value">{summary.pending}</div>
          </div>
          <div className="admin-kpi-card">
            <div className="admin-kpi-label">Odobreno</div>
            <div className="admin-kpi-value">{summary.approved}</div>
          </div>
          <div className="admin-kpi-card">
            <div className="admin-kpi-label">Sa medijom</div>
            <div className="admin-kpi-value">{summary.withMedia}</div>
          </div>
        </div>
      </div>
      {message ? (
        <div className="mt-5 rounded-[1.2rem] border border-secondary/16 bg-accent/55 px-4 py-3 text-sm font-medium text-primary">
          {message}
        </div>
      ) : null}
      <div className="mt-5 divide-y divide-border overflow-hidden rounded-[1.5rem] border border-border bg-white/62">
        {items.map((item) => (
          <article key={item.id} className="admin-list-card xl:flex-row xl:items-start xl:justify-between">
            <div className="min-w-0 flex-1">
              {(() => {
                const mediaPayload = extractPortalMediaPayload(item.payload);
                const mediaSources = resolvePortalMediaSources(mediaPayload);

                return (
                  <>
                    <div className="flex flex-wrap gap-2">
                      <span className="admin-chip !normal-case !tracking-normal">
                        {getPortalRequestTypeLabel(item.type)}
                      </span>
                      <span className="admin-chip !normal-case !tracking-normal">
                        {getPortalRequestStatusLabel(item.status)}
                      </span>
                      {mediaPayload?.materialType ? (
                        <span className="admin-chip !normal-case !tracking-normal">
                          {getPortalMediaMaterialLabel(mediaPayload.materialType)}
                        </span>
                      ) : null}
                      {mediaSources.map((source) => (
                        <span key={`${item.id}-${source}`} className="admin-chip !normal-case !tracking-normal">
                          {source}
                        </span>
                      ))}
                      {mediaPayload?.attachmentCount ? (
                        <span className="admin-chip !normal-case !tracking-normal">
                          Prilozi: {mediaPayload.attachmentCount}
                        </span>
                      ) : null}
                      <span className="admin-chip">{item.company.name}</span>
                    </div>
                    <h3 className="mt-3 text-xl font-semibold text-foreground">{item.title}</h3>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">{item.message}</p>
                    <div className="admin-kpi-grid mt-4">
                      <div className="admin-kpi-card">
                        <div className="admin-kpi-label">Pošiljalac</div>
                        <div className="admin-kpi-value">
                          {item.clientAccount?.name || item.clientAccount?.email || "Klijent"}
                        </div>
                      </div>
                      <div className="admin-kpi-card">
                        <div className="admin-kpi-label">Kreiran</div>
                        <div className="admin-kpi-value">{formatDate(item.createdAt)}</div>
                      </div>
                      <div className="admin-kpi-card">
                        <div className="admin-kpi-label">Obradio</div>
                        <div className="admin-kpi-value">
                          {item.reviewedBy?.name || item.reviewedBy?.email || "Niko"}
                        </div>
                      </div>
                      <div className="admin-kpi-card">
                        <div className="admin-kpi-label">Mediji</div>
                        <div className="admin-kpi-value">{item.media.length}</div>
                      </div>
                    </div>
                    {item.requestedPlan ? (
                      <p className="mt-3 text-xs uppercase tracking-[0.14em] text-primary">
                        Traženi plan: {item.requestedPlan.nameSr} · {getTierAdminLabel(item.requestedPlan.tier)}
                      </p>
                    ) : null}
                    {item.requestedPlacement ? (
                      <p className="mt-2 text-xs uppercase tracking-[0.14em] text-primary">
                        Traženo isticanje: {item.requestedPlacement.label || item.requestedPlacement.position}
                      </p>
                    ) : null}
                    {item.media.length ? (
                      <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                        {item.media.map((entry) => {
                          const renderImage = isRenderableImage(entry.media.mimeType, entry.media.url);
                          const sizeLabel = formatFileSize(entry.media.fileSize);

                          return (
                            <a
                              key={entry.id}
                              href={entry.media.url}
                              target="_blank"
                              rel="noreferrer"
                              className="overflow-hidden rounded-[1.1rem] border border-border bg-white/86 transition hover:-translate-y-[1px]"
                            >
                              {renderImage ? (
                                <Image
                                  src={entry.media.url}
                                  alt={entry.media.alt || item.title}
                                  width={360}
                                  height={220}
                                  unoptimized
                                  className="h-28 w-full object-cover"
                                />
                              ) : (
                                <div className="flex h-28 items-center justify-center bg-accent/55">
                                  <ThreeDIcon name="document" accent="stone" size="md" />
                                </div>
                              )}
                              <div className="space-y-1 px-3 py-2">
                                <p
                                  className="truncate text-sm font-semibold text-foreground"
                                  title={entry.media.alt || entry.media.url}
                                >
                                  {entry.media.alt || "Portal prilog"}
                                </p>
                                <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
                                  {renderImage ? "Vizual" : "Dokument"}
                                  {sizeLabel ? ` · ${sizeLabel}` : ""}
                                </p>
                              </div>
                            </a>
                          );
                        })}
                      </div>
                    ) : null}
                    <p className="mt-4 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                      Poslao: {item.clientAccount?.name || item.clientAccount?.email || "Klijent"} · {formatDate(item.createdAt)}
                    </p>
                    <p className="mt-2 text-xs uppercase tracking-[0.14em] text-muted-foreground">
                      Obradio: {item.reviewedBy?.name || item.reviewedBy?.email || "Niko"} · {formatDate(item.reviewedAt)}
                    </p>
                  </>
                );
              })()}
            </div>

            <div className="admin-list-card-actions min-w-[320px]">
              <textarea
                className="min-h-[110px] w-full rounded-[1.2rem] border border-border bg-white px-4 py-3 text-sm"
                placeholder="Interna napomena / rezolucija"
                value={notes[item.id] ?? item.resolutionNote ?? ""}
                onChange={(event) =>
                  setNotes((current) => ({ ...current, [item.id]: event.target.value }))
                }
              />
              <div className="grid gap-2">
                {(["IN_REVIEW", "APPROVED", "REJECTED", "COMPLETED"] as const).map((status) => (
                  <button
                    key={status}
                    type="button"
                    className="ghost-button justify-center"
                    onClick={() => handleReview(item.id, status)}
                    disabled={isPending}
                  >
                    Postavi na {getPortalRequestStatusLabel(status)}
                  </button>
                ))}
              </div>
              <div className="rounded-[1.2rem] border border-border bg-muted/30 px-4 py-3 text-sm text-muted-foreground">
                Poslednja obrada: {formatDate(item.reviewedAt)}
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}