"use client";

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

import type {
  AnalyticsReportDispatchRow,
  RevenueOpportunity,
} from "@/lib/data/revenue-ops";
import {
  getNotificationStatusLabel,
  getTierAdminLabel,
} from "@/lib/module-formatters";

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

  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 formatShortDate(value?: Date | string | null) {
  if (!value) {
    return "Bez datuma";
  }

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

function getOpportunityTone(type: RevenueOpportunity["type"]) {
  return {
    RENEWAL: "border-secondary/20 bg-secondary/10 text-secondary",
    UPGRADE: "border-primary/20 bg-primary/10 text-primary",
    PLACEMENT: "border-sky-500/20 bg-sky-500/10 text-sky-700",
    CTA_OPTIMIZATION: "border-amber-500/20 bg-amber-500/10 text-amber-700",
  }[type];
}

function getOpportunityTypeLabel(type: RevenueOpportunity["type"]) {
  return {
    RENEWAL: "Obnova",
    UPGRADE: "Viši paket",
    PLACEMENT: "Isticanje",
    CTA_OPTIMIZATION: "Poziv na akciju",
  }[type];
}

function getDispatchTone(status: string) {
  if (status === "SENT") {
    return "border-success/18 bg-success/10 text-success";
  }

  if (status === "FAILED") {
    return "border-danger/18 bg-danger/10 text-danger";
  }

  return "border-border bg-muted/70 text-muted-foreground";
}

export function RevenueOpsCommandCenter({
  opportunities,
  dispatches,
}: {
  opportunities: RevenueOpportunity[];
  dispatches: AnalyticsReportDispatchRow[];
}) {
  const router = useRouter();
  const [message, setMessage] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const summary = useMemo(
    () => ({
      renewal: opportunities.filter((item) => item.type === "RENEWAL").length,
      upgrade: opportunities.filter((item) => item.type === "UPGRADE").length,
      placement: opportunities.filter((item) => item.type === "PLACEMENT").length,
      cta: opportunities.filter((item) => item.type === "CTA_OPTIMIZATION").length,
      sent: dispatches.filter((item) => item.status === "SENT").length,
      failed: dispatches.filter((item) => item.status === "FAILED").length,
    }),
    [dispatches, opportunities],
  );

  function handleSendReports(cadence: "WEEKLY" | "MONTHLY") {
    startTransition(async () => {
      try {
        const response = await fetch("/api/admin/revenue-ops/reports", {
          method: "POST",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify({
            cadence,
            force: true,
          }),
        });

        const result = (await response.json()) as {
          message?: string;
          result?: {
            sent: number;
            skipped: number;
            failed: number;
          };
        };

        if (!response.ok) {
          throw new Error(result.message || "Slanje izveštaja nije uspelo.");
        }

        setMessage(
          `${cadence === "WEEKLY" ? "Nedeljni" : "Mesečni"} izveštaji: poslato ${result.result?.sent ?? 0}, preskočeno ${result.result?.skipped ?? 0}, grešaka ${result.result?.failed ?? 0}.`,
        );
        router.refresh();
      } catch (error) {
        setMessage(error instanceof Error ? error.message : "Slanje izveštaja nije uspelo.");
      }
    });
  }

  return (
    <section className="admin-command-shell">
      <div className="admin-command-header">
        <div>
          <p className="eyebrow">Komercijalni radar</p>
          <h3 className="mt-3 text-2xl font-semibold text-foreground">
            Obnove, prodajne prilike i PDF izveštaji
          </h3>
          <p className="mt-3 max-w-4xl text-sm leading-7 text-muted-foreground">
            Ovaj blok povezuje analitiku, naplatu i prodaju. Brzo vidiš kome paket ističe, gde ima prostora za viši paket ili isticanje i kada je poslednji izveštaj stvarno poslat klijentu.
          </p>
        </div>
        <div className="admin-command-actions">
          <button
            type="button"
            className="ghost-button"
            onClick={() => handleSendReports("WEEKLY")}
            disabled={isPending}
          >
            Pošalji nedeljne izveštaje
          </button>
          <button
            type="button"
            className="primary-button"
            onClick={() => handleSendReports("MONTHLY")}
            disabled={isPending}
          >
            Pošalji mesečne izveštaje
          </button>
        </div>
      </div>

      <div className="admin-kpi-grid mt-6 md:grid-cols-3 xl:grid-cols-6">
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Obnove</div>
          <div className="admin-kpi-value">{summary.renewal}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Nadogradnje</div>
          <div className="admin-kpi-value">{summary.upgrade}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Isticanja</div>
          <div className="admin-kpi-value">{summary.placement}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Poziv na akciju</div>
          <div className="admin-kpi-value">{summary.cta}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Poslato</div>
          <div className="admin-kpi-value">{summary.sent}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Neuspešno</div>
          <div className="admin-kpi-value">{summary.failed}</div>
        </div>
      </div>

      {message ? (
        <div className="mt-5 rounded-[1.2rem] border border-secondary/18 bg-secondary/10 px-4 py-3 text-sm font-medium text-primary">
          {message}
        </div>
      ) : null}

      <div className="admin-section-stack mt-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]">
        <div className="admin-scroll-region">
          <div className="admin-section-label">Prodajne prilike</div>
          <div className="mt-4 space-y-4">
            {opportunities.map((opportunity) => (
              <article key={opportunity.id} className="admin-list-card">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap gap-2">
                      <span className={`rounded-full border px-3 py-1 text-xs font-semibold ${getOpportunityTone(opportunity.type)}`}>
                        {getOpportunityTypeLabel(opportunity.type)}
                      </span>
                      <span className="admin-chip !normal-case !tracking-normal">
                        {getTierAdminLabel(opportunity.tier)}
                      </span>
                      <span className="admin-chip !normal-case !tracking-normal">
                        {opportunity.cityName}
                      </span>
                    </div>
                    <h4 className="mt-3 text-lg font-semibold text-foreground">
                      {opportunity.companyName}
                    </h4>
                    <p className="mt-1 text-sm font-medium text-foreground">
                      {opportunity.headline}
                    </p>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">
                      {opportunity.summary}
                    </p>
                  </div>
                  <Link href={`/admin/${opportunity.companyType === "PLACE" ? "mesta" : "kompanije"}/${opportunity.companyId}`} className="ghost-button">
                    Otvori profil
                  </Link>
                </div>

                <div className="mt-4 grid gap-3 md:grid-cols-4">
                  <div className="admin-kpi-card">
                    <div className="admin-kpi-label">Pregledi 30d</div>
                    <div className="admin-kpi-value">{opportunity.metrics.views}</div>
                  </div>
                  <div className="admin-kpi-card">
                    <div className="admin-kpi-label">Pozivi 30d</div>
                    <div className="admin-kpi-value">{opportunity.metrics.calls}</div>
                  </div>
                  <div className="admin-kpi-card">
                    <div className="admin-kpi-label">Jedinstveni 30d</div>
                    <div className="admin-kpi-value">{opportunity.metrics.uniqueVisitors}</div>
                  </div>
                  <div className="admin-kpi-card">
                    <div className="admin-kpi-label">Interakcije 30d</div>
                    <div className="admin-kpi-value">{opportunity.metrics.interactions}</div>
                  </div>
                </div>

                <div className="mt-4 rounded-[1.2rem] border border-border bg-white/75 px-4 py-3">
                  <div className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                    Preporuka
                  </div>
                  <p className="mt-2 text-sm leading-7 text-muted-foreground">
                    {opportunity.recommendation}
                  </p>
                  {opportunity.planValidTo ? (
                    <p className="mt-2 text-xs uppercase tracking-[0.14em] text-primary">
                      Istek paketa: {formatShortDate(opportunity.planValidTo)}
                    </p>
                  ) : null}
                </div>
              </article>
            ))}
            {opportunities.length === 0 ? (
              <div className="rounded-[1.4rem] border border-dashed border-border bg-muted/45 px-5 py-5 text-sm text-muted-foreground">
                Trenutno nema revenue prilika koje iskaču iznad praga. Ovo je dobar trenutak za ručni pregled i dodatni import sadržaja.
              </div>
            ) : null}
          </div>
        </div>

        <div className="admin-scroll-region">
          <div className="admin-section-label">Poslati izveštaji</div>
          <div className="mt-4 space-y-3">
            {dispatches.map((dispatch) => (
              <article key={dispatch.id} className="rounded-[1.35rem] border border-border bg-white/82 px-4 py-4">
                <div className="flex flex-wrap items-start justify-between gap-3">
                  <div>
                    <p className="font-semibold text-foreground">{dispatch.company.name}</p>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {dispatch.cadence === "WEEKLY" ? "Nedeljni" : "Mesečni"} • {dispatch.recipient}
                    </p>
                  </div>
                  <span className={`rounded-full border px-3 py-1 text-xs font-semibold ${getDispatchTone(dispatch.status)}`}>
                    {getNotificationStatusLabel(dispatch.status)}
                  </span>
                </div>
                <div className="mt-3 text-sm text-muted-foreground">
                  Period: {formatShortDate(dispatch.periodStart)} – {formatShortDate(dispatch.periodEnd)}
                </div>
                <div className="mt-2 text-sm text-muted-foreground">
                  Poslato: {formatDate(dispatch.sentAt)}
                </div>
                {dispatch.filename ? (
                  <div className="mt-2 text-sm text-muted-foreground">PDF: {dispatch.filename}</div>
                ) : null}
                {dispatch.errorMessage ? (
                  <div className="mt-3 rounded-[1rem] border border-danger/18 bg-danger/8 px-3 py-3 text-sm text-danger">
                    {dispatch.errorMessage}
                  </div>
                ) : null}
              </article>
            ))}
            {dispatches.length === 0 ? (
              <div className="rounded-[1.4rem] border border-dashed border-border bg-muted/45 px-5 py-5 text-sm text-muted-foreground">
                Još nema poslatih analytics izveštaja. Pošalji prvi set direktno iz ovog panela.
              </div>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}