"use client";

import Link from "next/link";

import type { MarketLeadershipReport } from "@/lib/data/market-leadership";

export function MarketLeadershipCommandCenter({
  report,
}: {
  report: MarketLeadershipReport;
}) {
  return (
    <section className="admin-command-shell">
      <div className="admin-command-header">
        <div>
          <p className="eyebrow">Tržišno vođstvo</p>
          <h3 className="mt-3 text-2xl font-semibold text-foreground">
            SEO dominacija, trust signali, partner app i regionalno širenje
          </h3>
          <p className="mt-3 max-w-4xl text-sm leading-7 text-muted-foreground">
            Ovaj centar meri koliko je Biznis Portal blizu statusa najjačeg premium poslovnog portala:
            kroz pokrivenost gradova i kategorija, jačinu poverenja profila, partner app adoption,
            oglasni inventar i AI-assisted enrichment preporuke.
          </p>
        </div>
        <div className="admin-command-actions">
          <Link href="/admin/commercial-scale" className="ghost-button">
            Komercijalni rast
          </Link>
          <Link href="/admin/kompanije" className="primary-button">
            Otvori profile
          </Link>
        </div>
      </div>

      <div className="admin-kpi-grid mt-6 md:grid-cols-4 xl:grid-cols-8">
        <div className="admin-kpi-card"><div className="admin-kpi-label">Objavljeni profili</div><div className="admin-kpi-value">{report.kpis.publishedProfiles}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Gradovi</div><div className="admin-kpi-value">{report.kpis.cityCoverage}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Opštine</div><div className="admin-kpi-value">{report.kpis.municipalityCoverage}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Kategorije</div><div className="admin-kpi-value">{report.kpis.activeCategories}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Verifikovani</div><div className="admin-kpi-value">{report.kpis.verifiedCoveragePercent}%</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Trust profili</div><div className="admin-kpi-value">{report.kpis.trustProfilesCount}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Partner app 30d</div><div className="admin-kpi-value">{report.kpis.partnerAccounts30d}</div></div>
        <div className="admin-kpi-card"><div className="admin-kpi-label">Aktivni oglasi</div><div className="admin-kpi-value">{report.kpis.activeAdSlots}</div></div>
      </div>

      <div className="admin-section-stack mt-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
        <div className="admin-scroll-region">
          <div className="admin-section-label">Sledeći potezi</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">SEO dominacija po nišama i gradovima</div>
          <div className="mt-4 grid gap-4 md:grid-cols-2">
            <div className="admin-list-card">
              <div className="summary-item-label">Jake kombinacije grad + kategorija</div>
              <div className="mt-4 space-y-3">
                {report.seo.strongCoverage.map((item) => (
                  <div key={item.key} className="summary-item">
                    <div className="summary-item-value">{item.categoryName} • {item.cityName}</div>
                    <p className="mt-2 text-sm leading-6 text-muted-foreground">
                      Kompanije: {item.companyCount} • Mesta: {item.placeCount}
                    </p>
                  </div>
                ))}
              </div>
            </div>
            <div className="admin-list-card">
              <div className="summary-item-label">Sledeće SEO zone za rast</div>
              <div className="mt-4 space-y-3">
                {report.seo.growthCoverage.map((item) => (
                  <div key={item.key} className="summary-item">
                    <div className="summary-item-value">{item.categoryName} • {item.cityName}</div>
                    <p className="mt-2 text-sm leading-6 text-muted-foreground">
                      Trenutno ukupno: {item.companyCount + item.placeCount} profila
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="admin-section-label mt-8">AI-assisted enrichment</div>
          <div className="mt-4 space-y-4">
            {report.aiEnrichment.candidates.map((item) => (
              <article key={item.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">{item.cityName}</span>
                      <span className="admin-chip !normal-case !tracking-normal">{item.missing.join(", ")}</span>
                    </div>
                    <h4 className="mt-3 text-lg font-semibold text-foreground">{item.name}</h4>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">
                      Predlog slogana: <strong className="text-foreground">{item.suggestion.suggestedSlogan}</strong>
                    </p>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">
                      SEO naslov: <strong className="text-foreground">{item.suggestion.seoHeadline}</strong>
                    </p>
                    <p className="mt-2 text-sm leading-7 text-muted-foreground">{item.suggestion.commercialHook}</p>
                  </div>
                  <Link
                    href={`/admin/${item.type === "PLACE" ? "mesta" : "kompanije"}/${item.id}`}
                    className="ghost-button"
                  >
                    Uredi profil
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>

        <div className="space-y-6">
          <div className="admin-list-card">
            <div className="admin-section-label">Trust signali</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">Verifikovani</div><div className="summary-item-value">{report.trust.verifiedProfiles}</div></div>
              <div className="summary-item"><div className="summary-item-label">Istaknuti</div><div className="summary-item-value">{report.trust.featuredProfiles}</div></div>
              <div className="summary-item"><div className="summary-item-label">Plakete</div><div className="summary-item-value">{report.trust.plaqueProfiles}</div></div>
              <div className="summary-item"><div className="summary-item-label">Sa recenzijama</div><div className="summary-item-value">{report.trust.reviewedProfiles}</div></div>
            </div>
            <div className="mt-4 space-y-3">
              {report.trust.incompleteTrustProfiles.map((item) => (
                <div key={item.id} className="summary-item">
                  <div className="summary-item-value">{item.name}</div>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    Nedostaje: {item.missing.join(", ")}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="admin-list-card">
            <div className="admin-section-label">Partner app adoption</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 nalozi 7d</div><div className="summary-item-value">{report.partnerApp.activeAccounts7d}</div></div>
              <div className="summary-item"><div className="summary-item-label">Aktivni nalozi 30d</div><div className="summary-item-value">{report.partnerApp.activeAccounts30d}</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">Adoption</div><div className="summary-item-value">{report.partnerApp.adoptionPercent}%</div></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">Dostupni slotovi</div><div className="summary-item-value">{report.ads.availableSlots}</div></div>
              <div className="summary-item"><div className="summary-item-label">Aktivni slotovi</div><div className="summary-item-value">{report.ads.activeSlots}</div></div>
              <div className="summary-item"><div className="summary-item-label">Isticanja</div><div className="summary-item-value">{report.ads.activePlacements}</div></div>
              <div className="summary-item"><div className="summary-item-label">Kampanje</div><div className="summary-item-value">{report.ads.activeCampaigns}</div></div>
            </div>
            <div className="mt-4 rounded-[1.2rem] border border-border bg-white/75 px-4 py-3 text-sm leading-7 text-muted-foreground">
              Slobodni slotovi: {report.ads.unusedSlots.join(", ") || "Trenutno nema slobodnih slotova."}
            </div>
          </div>

          <div className="admin-list-card">
            <div className="admin-section-label">Regionalno širenje</div>
            <div className="mt-4 space-y-3">
              {report.regionalExpansion.nextCities.map((item) => (
                <div key={item.cityName} className="summary-item">
                  <div className="summary-item-value">{item.cityName}</div>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    Profili: {item.profiles} • Kategorije: {item.categories}
                  </p>
                </div>
              ))}
            </div>
            <div className="mt-4 space-y-3">
              {report.regionalExpansion.nextMunicipalities.map((item) => (
                <div key={`${item.cityName}-${item.municipalityName}`} className="summary-item">
                  <div className="summary-item-value">{item.municipalityName}</div>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    {item.cityName} • Profili: {item.profiles}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}