"use client";

/**
 * PartnerNavCenter — Premium grupisana navigacija za partner kontrolnu tablu.
 *
 * Zamenjuje haotičan flat dock (19 pill-ova u 2 reda) sa scannable
 * 4-kolonskim grid-om grupisanim po domen-u:
 *   1. Komunikacija    — sve što stiže od kupaca/leadova
 *   2. Rast i prodaja  — Boost, oglasi, berza, CRM
 *   3. Nalog i profil  — Verifikacija, plan, profil, onboarding
 *   4. Analitika i finansije — Pregled, naplata, zahtevi, analitika
 *
 * UX principi:
 *   - Sve do koje god strane → max 2 klika (1 ako je vidljiva u grupi)
 *   - Vizuelno grupisano po srodnim akcijama — manje kognitivnog tereta
 *   - Badge-ovi za hitne stvari (NEW upiti, PENDING pitanja, dospele uplate)
 *   - Hover lift + slide chevron — modern enterprise dashboard pattern
 *
 * Inspiracija: Linear sidebar, Stripe dashboard nav, Notion sidebar groups.
 */

import Link from "next/link";
import { useState } from "react";
import type { CSSProperties, ReactNode } from "react";

/**
 * Imena ikona — string-key. KRITIČNO: ne prosleđujemo pre-renderovane JSX
 * elemente iz Server Component-a u Client Component preko props-a, jer
 * Next.js 16 RSC boundary ne serijalizuje pouzdano JSX kreiran u client
 * modulu kada se importuje sa servera. String ime ide kroz boundary čisto,
 * a SVG se renderuje OVDE u client komponenti (NavIcon helper ispod).
 */
export type NavIconName =
  | "inbox"
  | "rocket"
  | "shield"
  | "chart"
  | "message"
  | "lead"
  | "question"
  | "calendar"
  | "boost"
  | "tag"
  | "exchange"
  | "pipeline"
  | "home"
  | "user"
  | "verified"
  | "medal"
  | "spark"
  | "invoice"
  | "request"
  | "analytics"
  | "trail"
  | "lightbulb"
  | "store";

export type PartnerNavItem = {
  href: string;
  label: string;
  /** Mali opis ispod label-a — pojavljuje se samo na velikim ekranima */
  description?: string;
  /** Ime ikone iz NavIcons mape — renderuje se kao SVG */
  icon: NavIconName;
  /** Notifikacioni broj — orange pill u uglu */
  badge?: number;
  /** Eksterni link (otvori javni profil) — chevron postaje external arrow */
  external?: boolean;
};

export type PartnerNavGroup = {
  key: string;
  title: string;
  subtitle: string;
  /** Akcent boja grupe — koristi se za eyebrow ikonu i hover tint */
  accent: "orange" | "blue" | "violet" | "emerald";
  groupIcon: NavIconName;
  items: PartnerNavItem[];
};

/* Helper komponenta — renderuje SVG po imenu. Ovo živi unutar client
   komponente pa nema RSC serialization issue-a.
   Width/height su INLINE atribut (ne CSS) — bulletproof protiv bilo kog
   parent CSS reset-a. Stroke color je takođe inline currentColor sa display
   prop u style da nadjača bilo koju agensiranu CSS rule. */
function NavIcon({ name, size = 18 }: { name: NavIconName; size?: number }) {
  const paths = ICON_PATHS[name];
  if (!paths) {
    if (typeof window !== "undefined") {
      console.warn(`[PartnerNavCenter] Missing icon: ${name}`);
    }
    return null;
  }
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2.2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      style={{ display: "block", flexShrink: 0 }}
    >
      {paths}
    </svg>
  );
}

/**
 * Accent paleta po grupi — koristi se za:
 *   - group icon container (veliki, gore u header-u)
 *   - item icon containers (svi item-i nasleđuju preko `--nav-accent-*` CSS vars)
 *
 * `bgTop/bgBot`: gradijent pozadina za icon container (light tint)
 * `text`: boja same SVG ikone (jača, kontrastna)
 * `ring`: tanki inset border u accent boji
 * `shadow`: drop shadow tint (suptilna senka u boji grupe)
 */
/**
 * Accent paleta po grupi — koristi se za:
 *   - group icon container (veliki, gore u header-u)
 *   - item icon containers (svi item-i nasleđuju preko `--nav-accent-*` CSS vars)
 *
 * IMPORTANT: bgTop/bgBot su MEDIUM-tint (ne skoro-bele) da SVG line ikone
 * sa darker stroke jasno pop-uju. Tested kontrast: stroke vs bg → >= 4.5:1
 * (WCAG AA za normal text na light icons).
 */
const ACCENT_VARS: Record<
  PartnerNavGroup["accent"],
  { bgTop: string; bgBot: string; text: string; ring: string; shadow: string }
> = {
  orange: {
    bgTop: "#ffe4d3",
    bgBot: "#ffcaa8",
    text: "#9a2f0a",
    ring: "rgba(194, 65, 12, 0.28)",
    shadow: "rgba(194, 65, 12, 0.28)",
  },
  blue: {
    bgTop: "#dce8ff",
    bgBot: "#bdd2ff",
    text: "#1e3a8a",
    ring: "rgba(29, 78, 216, 0.28)",
    shadow: "rgba(29, 78, 216, 0.28)",
  },
  violet: {
    bgTop: "#e9dbff",
    bgBot: "#d4bbff",
    text: "#581c87",
    ring: "rgba(109, 40, 217, 0.28)",
    shadow: "rgba(109, 40, 217, 0.28)",
  },
  emerald: {
    bgTop: "#d1fae5",
    bgBot: "#a7f3d0",
    text: "#064e3b",
    ring: "rgba(4, 120, 87, 0.28)",
    shadow: "rgba(4, 120, 87, 0.28)",
  },
};

export function PartnerNavCenter({ groups }: { groups: PartnerNavGroup[] }) {
  // Mobile accordion state — koja je grupa otvorena.
  // Na desktopu (≥720px) CSS auto-otvara sve kartice (display:block na list),
  // pa ova state ima efekat samo na mobile (<720px) gde grupa može da se
  // collapse-uje. Default: prva grupa (Komunikacija) otvorena — najvažnija.
  const [openKey, setOpenKey] = useState<string | null>(groups[0]?.key ?? null);

  return (
    <section className="partner-nav-center">
      <header className="partner-nav-center-header">
        <div>
          <p className="partner-nav-center-eyebrow">Komandni centar</p>
          <h2 className="partner-nav-center-title">Šta želite da uradite danas?</h2>
        </div>
        <p className="partner-nav-center-help">
          Sve do koje god strane stižete u najviše dva klika. Grupisano po onome
          što najčešće radite.
        </p>
      </header>

      <div className="partner-nav-grid">
        {groups.map((group) => {
          const accent = ACCENT_VARS[group.accent];
          // CSS varijable se postavljaju na kartici i kaskadno se primenjuju
          // na sve `.partner-nav-item-icon` containere unutar — tako da svaki
          // item u Komunikacija grupi automatski dobija orange tint, itd.
          const cardStyle = {
            ["--nav-accent-bg-top" as string]: accent.bgTop,
            ["--nav-accent-bg-bot" as string]: accent.bgBot,
            ["--nav-accent-text" as string]: accent.text,
            ["--nav-accent-ring" as string]: accent.ring,
            ["--nav-accent-shadow" as string]: accent.shadow,
          } as CSSProperties;
          const isOpen = openKey === group.key;
          // Suma badge-ova u grupi za prikaz pored header-a na mobile (kad je collapsed)
          const groupBadgeTotal = group.items.reduce(
            (sum, item) => sum + (item.badge ?? 0),
            0,
          );
          return (
            <div
              key={group.key}
              className={`partner-nav-card${isOpen ? " is-open" : ""}`}
              style={cardStyle}
            >
              {/* Header postaje button na mobile (toggle accordion).
                  Na desktopu (≥720px) CSS pretvara button u običan div bez
                  pointer-a — sve grupe su uvek otvorene. */}
              <button
                type="button"
                className="partner-nav-card-header"
                aria-expanded={isOpen}
                aria-controls={`nav-group-${group.key}`}
                onClick={() => setOpenKey(isOpen ? null : group.key)}
              >
                <div
                  className="partner-nav-card-icon"
                  style={{
                    background: `linear-gradient(180deg, ${accent.bgTop} 0%, ${accent.bgBot} 100%)`,
                    color: accent.text,
                    boxShadow: `inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px ${accent.ring}, 0 6px 14px -4px ${accent.shadow}`,
                  }}
                >
                  <NavIcon name={group.groupIcon} size={24} />
                </div>
                <div className="partner-nav-card-titles">
                  <p className="partner-nav-card-title">{group.title}</p>
                  <p className="partner-nav-card-subtitle">{group.subtitle}</p>
                </div>
                {/* Total badge — vidi se samo na mobile (kad je collapsed) */}
                {groupBadgeTotal > 0 && (
                  <span className="partner-nav-card-total-badge" aria-hidden="true">
                    {groupBadgeTotal}
                  </span>
                )}
                {/* Chevron — vidi se samo na mobile, rotira se kad je open */}
                <span className="partner-nav-card-toggle" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9" />
                  </svg>
                </span>
              </button>

              <ul
                id={`nav-group-${group.key}`}
                className="partner-nav-list"
                role="region"
                aria-label={group.title}
              >
                {group.items.map((item) => (
                  <li key={item.href}>
                    <Link href={item.href} className="partner-nav-item">
                      <span className="partner-nav-item-icon" aria-hidden="true">
                        <NavIcon name={item.icon} />
                      </span>
                      <span className="partner-nav-item-text">
                        <span className="partner-nav-item-label">{item.label}</span>
                        {item.description && (
                          <span className="partner-nav-item-description">
                            {item.description}
                          </span>
                        )}
                      </span>
                      {item.badge && item.badge > 0 ? (
                        <span className="partner-nav-item-badge">{item.badge}</span>
                      ) : null}
                      <span className="partner-nav-item-chevron" aria-hidden="true">
                        {item.external ? (
                          <svg
                            width="13"
                            height="13"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2.2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          >
                            <path d="M7 17L17 7" />
                            <path d="M7 7h10v10" />
                          </svg>
                        ) : (
                          <svg
                            width="13"
                            height="13"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2.2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          >
                            <polyline points="9 18 15 12 9 6" />
                          </svg>
                        )}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ─── SVG path tela — KRITIČNO: kreiraju se i renderuju OVDE u client
   modulu. Server ih nikad ne vidi kao JSX, samo string imena kroz props. */
const ICON_PATHS: Record<NavIconName, ReactNode> = {
  // ─── Group icons ───────────────────────────────────
  inbox: (
    <>
      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
      <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
    </>
  ),
  rocket: (
    <>
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
      <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
    </>
  ),
  shield: (
    <>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <polyline points="9 12 11 14 15 10" />
    </>
  ),
  chart: (
    <>
      <path d="M3 17l6-6 4 4 8-8" />
      <polyline points="14 7 21 7 21 14" />
    </>
  ),
  // ─── Item icons ────────────────────────────────────
  message: (
    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
  ),
  lead: (
    // Magnet — privlači leadove
    <>
      <path d="M6 4v8a6 6 0 0 0 12 0V4" />
      <path d="M6 4h4" />
      <path d="M14 4h4" />
      <path d="M6 12h4" />
      <path d="M14 12h4" />
    </>
  ),
  question: (
    <>
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
      <path d="M10.5 9.5a1.5 1.5 0 0 1 3 0c0 1-1.5 1.5-1.5 2.5" />
      <line x1="12" y1="14.5" x2="12.01" y2="14.5" />
    </>
  ),
  calendar: (
    <>
      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
      <line x1="16" y1="2" x2="16" y2="6" />
      <line x1="8" y1="2" x2="8" y2="6" />
      <line x1="3" y1="10" x2="21" y2="10" />
      <path d="M9 16l2 2 4-4" />
    </>
  ),
  boost: (
    // Raketa za boost — manja varijanta rocket-a
    <>
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
      <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
      <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
      <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
    </>
  ),
  tag: (
    // Megafon — oglasi
    <>
      <path d="M3 11l18-5v12L3 14v-3z" />
      <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6" />
    </>
  ),
  exchange: (
    // Stripe-style swap — berza
    <>
      <polyline points="17 1 21 5 17 9" />
      <path d="M3 11V9a4 4 0 0 1 4-4h14" />
      <polyline points="7 23 3 19 7 15" />
      <path d="M21 13v2a4 4 0 0 1-4 4H3" />
    </>
  ),
  pipeline: (
    // Funnel — sales pipeline
    <path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z" />
  ),
  home: (
    // Dashboard grid — pregled
    <>
      <rect x="3" y="3" width="7" height="9" rx="1" />
      <rect x="14" y="3" width="7" height="5" rx="1" />
      <rect x="14" y="12" width="7" height="9" rx="1" />
      <rect x="3" y="16" width="7" height="5" rx="1" />
    </>
  ),
  user: (
    // ID kartica
    <>
      <rect x="2" y="4" width="20" height="16" rx="2" />
      <circle cx="9" cy="11" r="2.5" />
      <path d="M5 17c0-2 2-3 4-3s4 1 4 3" />
      <line x1="15" y1="9" x2="19" y2="9" />
      <line x1="15" y1="13" x2="19" y2="13" />
      <line x1="15" y1="17" x2="18" y2="17" />
    </>
  ),
  verified: (
    // Štit sa check unutra
    <>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
      <polyline points="9 12 11 14 15 10" />
    </>
  ),
  medal: (
    // Kruna
    <>
      <path d="M2 20h20" />
      <path d="M5 17l-1-9 5 4 3-7 3 7 5-4-1 9" />
      <circle cx="12" cy="6" r="1" />
    </>
  ),
  spark: (
    // Checklist
    <>
      <path d="M9 11l3 3L22 4" />
      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
    </>
  ),
  invoice: (
    <>
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14 2 14 8 20 8" />
      <path d="M12 11v6" />
      <path d="M9 14h6" />
    </>
  ),
  request: (
    <>
      <path d="M2 9a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v3a2 2 0 1 0 0 4v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3a2 2 0 1 0 0-4V9z" />
      <line x1="13" y1="5" x2="13" y2="19" strokeDasharray="2 2" />
    </>
  ),
  analytics: (
    <>
      <line x1="18" y1="20" x2="18" y2="10" />
      <line x1="12" y1="20" x2="12" y2="4" />
      <line x1="6" y1="20" x2="6" y2="14" />
      <polyline points="3 7 9 1 15 7 21 3" opacity="0.5" />
    </>
  ),
  trail: (
    // Eye
    <>
      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
      <circle cx="12" cy="12" r="3" />
    </>
  ),
  lightbulb: (
    <>
      <line x1="9" y1="18" x2="15" y2="18" />
      <line x1="10" y1="22" x2="14" y2="22" />
      <path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14" />
    </>
  ),
  store: (
    // Korpa
    <>
      <circle cx="9" cy="21" r="1" />
      <circle cx="20" cy="21" r="1" />
      <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
    </>
  ),
};

/**
 * Public API za page.tsx — string-name konstantna mapa za type safety.
 * Korisniku omogućava `NavIcons.inbox` umesto literal "inbox" (autocomplete +
 * compile-time provera). Vrednost je samo string ime, ne JSX.
 */
export const NavIcons: Record<NavIconName, NavIconName> = {
  inbox: "inbox",
  rocket: "rocket",
  shield: "shield",
  chart: "chart",
  message: "message",
  lead: "lead",
  question: "question",
  calendar: "calendar",
  boost: "boost",
  tag: "tag",
  exchange: "exchange",
  pipeline: "pipeline",
  home: "home",
  user: "user",
  verified: "verified",
  medal: "medal",
  spark: "spark",
  invoice: "invoice",
  request: "request",
  analytics: "analytics",
  trail: "trail",
  lightbulb: "lightbulb",
  store: "store",
};