"use client";

import Link from "next/link";

import type { CommercialScaleReport } from "@/lib/data/commercial-scale";
import { getTierAdminLabel } from "@/lib/module-formatters";

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

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

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

function statusTone(value: boolean) {
  return value
    ? "border-success/18 bg-success/10 text-success"
    : "border-danger/18 bg-danger/10 text-danger";
}

export function CommercialScaleCommandCenter({
  report,
}: {
  report: CommercialScaleReport;
}) {
  const readinessItems: Array<{ label: string; ready: boolean }> = [
    { label: "Paketi i cene", ready: report.readiness.plansReady },
    { label: "Oglašavanje", ready: report.readiness.advertisingReady },
    { label: "Media kit", ready: report.readiness.mediaKitReady },
    { label: "Komercijalni inbox", ready: report.readiness.inquiryInboxReady },
    { label: "PDF izveštaji", ready: report.readiness.reportEngineReady },
    { label: "Partner aplikacija", ready: report.readiness.partnerAppReady },
  ];

  return (
    <section className="admin-command-shell">
      <div className="admin-command-header">
        <div>
          <p className="eyebrow">Komercijalni rast</p>
          <h3 className="mt-3 text-2xl font-semibold text-foreground">
            Prodaja, onboarding, PDF izveštaji i partner aplikacija
          </h3>
          <p className="mt-3 max-w-4xl text-sm leading-7 text-muted-foreground">
            Ovaj pregled spaja pakete, oglašavanje, media kit, komercijalne upite,
            onboarding novih klijenata, mesečne PDF izveštaje i partner app korišćenje
            u jedan komercijalni komandni centar.
          </p>
        </div>
        <div className="admin-command-actions">
          <Link href="/paketi-i-cene" className="ghost-button">
            Otvori pakete
          </Link>
          <Link href="/oglasavanje" className="ghost-button">
            Otvori oglašavanje
          </Link>
          <Link href="/media-kit" className="primary-button">
            Otvori media kit
          </Link>
        </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">Aktivni klijenti</div>
          <div className="admin-kpi-value">{report.kpis.activeClientAccounts}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Aktivni paketi</div>
          <div className="admin-kpi-value">{report.kpis.activePaidProfiles}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Aktivni oglasi</div>
          <div className="admin-kpi-value">{report.kpis.activeAds}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Otvoreni upiti</div>
          <div className="admin-kpi-value">{report.kpis.openSalesInquiries}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Mesečni PDF 30d</div>
          <div className="admin-kpi-value">{report.kpis.monthlyReportsSent30d}</div>
        </div>
        <div className="admin-kpi-card">
          <div className="admin-kpi-label">Aktivni uređaji 30d</div>
          <div className="admin-kpi-value">{report.kpis.partnerDevices30d}</div>
        </div>
      </div>

      <div className="admin-section-stack mt-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(360px,0.9fr)]">
        <div className="admin-scroll-region">
          <div className="admin-section-label">Komercijalna spremnost</div>
          <div className="mt-4 grid gap-3 md:grid-cols-3">
            {readinessItems.map(({ label, ready }) => (
              <div key={label} className="admin-list-card">
                <div className="flex items-center justify-between gap-3">
                  <div className="text-sm font-semibold text-foreground">{label}</div>
                  <span className={`rounded-full border px-3 py-1 text-xs font-semibold ${statusTone(Boolean(ready))}`}>
                    {ready ? "Spremno" : "Traži doradu"}
                  </span>
                </div>
              </div>
            ))}
          </div>

          <div className="admin-section-label mt-8">Sledeće akcije</div>
          <div className="mt-4 space-y-4">
            {report.nextActions.map((item) => (
              <article key={item.title} className="admin-list-card">
                <div className="flex flex-wrap items-start justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <h4 className="text-lg font-semibold text-foreground">{item.title}</h4>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">{item.description}</p>
                  </div>
                  {item.href ? (
                    <Link href={item.href} className="ghost-button">
                      Otvori
                    </Link>
                  ) : null}
                </div>
              </article>
            ))}
          </div>

          <div className="admin-section-label mt-8">Onboarding klijenata</div>
          <div className="mt-4 grid gap-4 md:grid-cols-4">
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Prosečna spremnost</div>
              <div className="admin-kpi-value">{report.onboarding.averageCompletionPercent}%</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Bez portal pristupa</div>
              <div className="admin-kpi-value">{report.onboarding.activeProfilesWithoutPortalAccess}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Pozvani bez aktivacije</div>
              <div className="admin-kpi-value">{report.onboarding.invitedNotActivated}</div>
            </div>
            <div className="admin-kpi-card">
              <div className="admin-kpi-label">Bez aktivnog uređaja</div>
              <div className="admin-kpi-value">{report.onboarding.accountsWithoutRecentDevice}</div>
            </div>
          </div>

          <div className="mt-4 space-y-4">
            {report.onboarding.checklistHighlights.map((item) => (
              <article key={item.accountId} className="admin-list-card">
                <div className="flex flex-wrap items-start justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap gap-2">
                      <span className="admin-chip !normal-case !tracking-normal">{item.percent}% spremno</span>
                      <span className="admin-chip !normal-case !tracking-normal">{item.email}</span>
                    </div>
                    <h4 className="mt-3 text-lg font-semibold text-foreground">{item.companyName}</h4>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">
                      Nedostaje: {item.missing.join(", ") || "Nema otvorenih stavki."}
                    </p>
                  </div>
                  <Link href={`/admin/kompanije/${item.companyId}`} className="ghost-button">
                    Otvori profil
                  </Link>
                </div>
              </article>
            ))}
          </div>

          <div className="admin-section-label mt-8">Prodajne prilike</div>
          <div className="mt-4 space-y-4">
            {report.opportunities.map((opportunity) => (
              <article key={opportunity.id} className="admin-list-card">
                <div className="flex flex-wrap items-start justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap gap-2">
                      <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.recommendation}</p>
                  </div>
                  <Link
                    href={`/admin/${opportunity.companyType === "PLACE" ? "mesta" : "kompanije"}/${opportunity.companyId}`}
                    className="ghost-button"
                  >
                    Otvori profil
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div className="space-y-6">
          <div className="admin-list-card">
            <div className="admin-section-label">Komercijalni upiti</div>
            <div className="mt-4 grid gap-3 md:grid-cols-3 xl:grid-cols-1">
              <div className="summary-item">
                <div className="summary-item-label">Otvoreni</div>
                <div className="summary-item-value">{report.inquiries.open}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Odgovoreni 30d</div>
                <div className="summary-item-value">{report.inquiries.responded30d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Zatvoreni 30d</div>
                <div className="summary-item-value">{report.inquiries.closed30d}</div>
              </div>
            </div>
            <div className="mt-4 space-y-3">
              {report.inquiries.recent.map((item) => (
                <div key={item.id} className="summary-item">
                  <div className="summary-item-label">{item.inquiryType}</div>
                  <div className="summary-item-value">{item.companyName || item.contactName}</div>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">
                    {item.preferredPlan || item.preferredModule || item.placementLabel || "Opšti upit"}
                  </p>
                  <p className="mt-2 text-xs uppercase tracking-[0.14em] text-primary">
                    {formatDateTime(item.createdAt)}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="admin-list-card">
            <div className="admin-section-label">PDF izveštaji</div>
            <div className="mt-4 grid gap-3 md:grid-cols-3 xl:grid-cols-1">
              <div className="summary-item">
                <div className="summary-item-label">Nedeljni 30d</div>
                <div className="summary-item-value">{report.reports.weeklySent30d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Mesečni 30d</div>
                <div className="summary-item-value">{report.reports.monthlySent30d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Greške 30d</div>
                <div className="summary-item-value">{report.reports.failed30d}</div>
              </div>
            </div>
            <div className="mt-4 text-sm leading-7 text-muted-foreground">
              Poslednji mesečni dispatch: <strong className="text-foreground">{formatDateTime(report.reports.lastMonthlySentAt)}</strong>
              <br />
              Poslednji nedeljni dispatch: <strong className="text-foreground">{formatDateTime(report.reports.lastWeeklySentAt)}</strong>
            </div>
          </div>

          <div className="admin-list-card">
            <div className="admin-section-label">Partner app korišćenje</div>
            <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-1">
              <div className="summary-item">
                <div className="summary-item-label">Aktivni uređaji 7d</div>
                <div className="summary-item-value">{report.partnerApp.activeDevices7d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Aktivni uređaji 30d</div>
                <div className="summary-item-value">{report.partnerApp.activeDevices30d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Instalirano kao app</div>
                <div className="summary-item-value">{report.partnerApp.installedAsApp30d}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Push uključen</div>
                <div className="summary-item-value">{report.partnerApp.notificationsEnabled30d}</div>
              </div>
            </div>
            <div className="mt-4 space-y-3">
              {report.partnerApp.topAccounts.map((item) => (
                <div key={item.accountId} className="summary-item">
                  <div className="summary-item-label">{item.companyName}</div>
                  <div className="summary-item-value">{item.recentDevices} uređaja</div>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">
                    {item.email} • {item.installedAsApp ? "Instalirano kao app" : "Web/PWA"} • {item.notificationsEnabled ? "Push aktivan" : "Push nije aktivan"}
                  </p>
                  <p className="mt-2 text-xs uppercase tracking-[0.14em] text-primary">
                    Poslednja aktivnost: {formatDateTime(item.lastSeenAt)}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="admin-list-card">
            <div className="admin-section-label">Oglasni inventar</div>
            <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-1">
              <div className="summary-item">
                <div className="summary-item-label">Aktivna isticanja</div>
                <div className="summary-item-value">{report.inventory.activePlacements}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Aktivne kampanje</div>
                <div className="summary-item-value">{report.inventory.activeCampaigns}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Zakazana isticanja</div>
                <div className="summary-item-value">{report.inventory.upcomingPlacements}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Zakazane kampanje</div>
                <div className="summary-item-value">{report.inventory.upcomingCampaigns}</div>
              </div>
            </div>
            <div className="mt-4 space-y-3">
              {report.inventory.recentAds.map((item) => (
                <div key={`${item.type}-${item.id}`} className="summary-item">
                  <div className="summary-item-label">{item.type === "PLACEMENT" ? "Isticanje" : "Kampanja"}</div>
                  <div className="summary-item-value">{item.title}</div>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">
                    {item.companyName} • {item.status}
                  </p>
                  <p className="mt-2 text-xs uppercase tracking-[0.14em] text-primary">
                    {formatDate(item.startAt)} → {formatDate(item.endAt)}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}