import Link from "next/link";

import type {
  PartnerSalesIntelligence,
  PartnerSalesPlay,
} from "@/lib/data/partner-sales-intelligence";

function toneClasses(tone: PartnerSalesPlay["tone"]) {
  if (tone === "danger") {
    return {
      panel: "border-danger/20 bg-danger/8",
      badge: "border-danger/18 bg-danger/12 text-danger",
      label: "Hitno",
    };
  }

  if (tone === "warning") {
    return {
      panel: "border-warning/20 bg-warning/8",
      badge: "border-warning/18 bg-warning/12 text-warning",
      label: "Važno",
    };
  }

  if (tone === "success") {
    return {
      panel: "border-success/20 bg-success/8",
      badge: "border-success/18 bg-success/12 text-success",
      label: "Prilika",
    };
  }

  return {
    panel: "border-[#9ec5ff]/35 bg-[#eef5ff]",
    badge: "border-[#9ec5ff]/40 bg-[#e6f0ff] text-[#2f75ff]",
    label: "Preporuka",
  };
}

export function PortalSalesIntelligence({
  intelligence,
}: {
  intelligence: PartnerSalesIntelligence;
}) {
  const nextActionTone = intelligence.nextBestAction ? toneClasses(intelligence.nextBestAction.tone) : null;

  return (
    <section id="preporuke" className="space-y-6">
      <div className="partner-app-panel p-6">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <p className="eyebrow">Komercijalne preporuke</p>
            <h2 className="mt-3 font-display text-4xl font-semibold text-foreground">
              Jasno vidite šta je sledeći najbolji potez za rast profila
            </h2>
            <p className="mt-4 max-w-4xl text-sm leading-7 text-muted-foreground">
              Ovaj blok prevodi analitiku, rok važenja paketa i aktivne module u konkretne preporuke:
              obnova, upgrade, isticanje ili optimizacija profila. Ideja je da odmah znate šta sada
              najviše donosi rezultat.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span className="admin-chip !normal-case !tracking-normal">
              Lead score: {intelligence.leadScore}/100
            </span>
            <span className="admin-chip !normal-case !tracking-normal">
              Ocena: {intelligence.leadGrade}
            </span>
            <span className="admin-chip !normal-case !tracking-normal">
              Paket: {intelligence.planStatusLabel}
            </span>
          </div>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <div className="portal-metric">
          <div className="flex items-center gap-3">
            <span className="portal-stat-ic kind-score">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M3.34 19a10 10 0 1 1 17.32 0" />
                <path d="M12 14l4-4" />
                <circle cx="12" cy="14" r="1.4" fill="currentColor" stroke="none" />
              </svg>
            </span>
            <div className="portal-metric-label">Lead score</div>
          </div>
          <div className="portal-metric-value mt-4">{intelligence.leadScore}</div>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            Grade {intelligence.leadGrade} na osnovu pregleda, poziva, jedinstvenih poseta i interakcija u poslednjih 30 dana.
          </p>
        </div>
        <div className="portal-metric">
          <div className="flex items-center gap-3">
            <span className="portal-stat-ic kind-plan">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="2" y="5" width="20" height="14" rx="2" />
                <path d="M2 10h20" />
              </svg>
            </span>
            <div className="portal-metric-label">Status paketa</div>
          </div>
          <div className="portal-metric-value mt-4">
            {intelligence.daysUntilPlanExpiry === null ? "Aktivan" : `${intelligence.daysUntilPlanExpiry}`}
          </div>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">{intelligence.planStatusLabel}</p>
        </div>
        <div className="portal-metric">
          <div className="flex items-center gap-3">
            <span className="portal-stat-ic kind-modules">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <polygon points="12 2 2 7 12 12 22 7 12 2" />
                <polyline points="2 17 12 22 22 17" />
                <polyline points="2 12 12 17 22 12" />
              </svg>
            </span>
            <div className="portal-metric-label">Aktivni moduli</div>
          </div>
          <div className="portal-metric-value mt-4">{intelligence.activeModules}</div>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            Aktivni dodatni moduli povećavaju broj ulaznih tačaka i pomažu da vas više ljudi pronađe.
          </p>
        </div>
        <div className="portal-metric">
          <div className="flex items-center gap-3">
            <span className="portal-stat-ic kind-placements">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
              </svg>
            </span>
            <div className="portal-metric-label">Aktivna isticanja</div>
          </div>
          <div className="portal-metric-value mt-4">{intelligence.activePlacements}</div>
          <p className="mt-3 text-sm leading-6 text-muted-foreground">
            Premium pozicije ubrzavaju prelazak iz pregleda u poziv, rezervaciju ili upit.
          </p>
        </div>
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
        <section className="partner-app-panel p-6">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <p className="eyebrow">Plan akcije</p>
              <h3 className="mt-3 font-display text-3xl font-semibold text-foreground">
                Preporuke koje sada najviše vrede
              </h3>
            </div>
            <span className="admin-chip !normal-case !tracking-normal">
              Poslednjih 30 dana
            </span>
          </div>

          <div className="mt-5 grid gap-4 lg:grid-cols-2">
            {intelligence.plays.length ? (
              intelligence.plays.map((play) => {
                const tone = toneClasses(play.tone);
                return (
                  <article
                    key={play.id}
                    className={`partner-intelligence-play ${tone.panel}`}
                    data-tone={play.tone}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex items-center gap-3">
                        <div>
                          <div className={`partner-intelligence-badge ${tone.badge}`}>{tone.label}</div>
                          <h4 className="partner-intelligence-title">{play.title}</h4>
                        </div>
                      </div>
                    </div>
                    <p className="partner-intelligence-copy">{play.summary}</p>
                    <p className="partner-intelligence-note">{play.recommendation}</p>
                    <div className="mt-4">
                      <Link href={play.href} className="ghost-button px-4 py-2 text-sm">
                        {play.ctaLabel}
                      </Link>
                    </div>
                  </article>
                );
              })
            ) : (
              <div className="summary-item text-sm leading-7 text-muted-foreground lg:col-span-2">
                Profil trenutno nema kritičnih komercijalnih upozorenja. Paket, analytics i moduli izgledaju stabilno.
                Nastavite da pratite analitiku i po potrebi pojačajte isticanja ili sadržaj.
              </div>
            )}
          </div>
        </section>

        <aside className="space-y-4">
          <div className="partner-app-panel p-6">
            <p className="eyebrow">Sledeći najbolji potez</p>
            {intelligence.nextBestAction && nextActionTone ? (
              <div className={`partner-intelligence-next ${nextActionTone.panel}`}>
                <div className="flex items-center gap-3">
                  <div>
                    <div className={`partner-intelligence-badge ${nextActionTone.badge}`}>
                      {nextActionTone.label}
                    </div>
                    <h3 className="mt-3 text-[1.45rem] font-semibold leading-tight text-foreground">
                      {intelligence.nextBestAction.title}
                    </h3>
                  </div>
                </div>
                <p className="mt-4 text-sm leading-7 text-muted-foreground">
                  {intelligence.nextBestAction.summary}
                </p>
                <p className="mt-3 text-sm leading-7 text-foreground/80">
                  {intelligence.nextBestAction.recommendation}
                </p>
                <div className="mt-5">
                  <Link href={intelligence.nextBestAction.href} className="primary-button">
                    {intelligence.nextBestAction.ctaLabel}
                  </Link>
                </div>
              </div>
            ) : (
              <div className="summary-item text-sm leading-7 text-muted-foreground">
                Nema hitne preporuke. Profil je trenutno u stabilnom režimu i može da prati analitiku bez dodatne akcije.
              </div>
            )}
          </div>

          <div className="partner-app-panel p-6">
            <p className="eyebrow">Sažetak signala</p>
            <div className="mt-4 space-y-3">
              <div className="summary-item">
                <div className="summary-item-label">Pregledi 30 dana</div>
                <div className="summary-item-value">{intelligence.summary.views}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Pozivi 30 dana</div>
                <div className="summary-item-value">{intelligence.summary.calls}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Jedinstveni posetioci</div>
                <div className="summary-item-value">{intelligence.summary.uniqueVisitors}</div>
              </div>
              <div className="summary-item">
                <div className="summary-item-label">Ukupne interakcije</div>
                <div className="summary-item-value">{intelligence.summary.interactions}</div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}