"use client";

/**
 * AppPartnerLeadExchange — native overlay za /portal/lead-exchange (berza lidova).
 */

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCallback, useEffect, useState } from "react";

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import { trackScreen } from "@/lib/native/analytics";
import { getLocalePrefix, type Locale } from "@/lib/i18n/i18n";
import { useAppVariant } from "@/lib/native/app-variant";
import { usePartnerPreview } from "@/lib/native/preview-partner";

type Bid = {
  id: string;
  category: string;
  city: string | null;
  maxLeadPriceCents: number;
  monthlyCapCents: number;
  isActive: boolean;
  createdAt: string;
};

type Purchase = {
  id?: string;
  priceCents: number;
  createdAt: string | Date;
  listingLead?: {
    name?: string;
    email?: string;
    entityTitle?: string;
    message?: string;
  } | null;
};

type Payload = {
  summary: {
    purchasedThisMonth: number;
    spentThisMonthCents: number;
    recent: Purchase[];
  };
  bids: Bid[];
};

function useIsNative(): boolean | null {
  const [n, setN] = useState<boolean | null>(null);
  useEffect(() => {
    let d = false;
    (async () => {
      try {
        const { Capacitor } = await import("@capacitor/core");
        if (!d) setN(Capacitor.isNativePlatform());
      } catch {
        if (!d) setN(false);
      }
    })();
    return () => {
      d = true;
    };
  }, []);
  return n;
}

function isPath(p: string, prefix: string): boolean {
  const x = prefix && p.startsWith(prefix) ? p.slice(prefix.length) : p;
  return (x.replace(/\/+$/, "") || "/") === "/portal/lead-exchange";
}

function eur(cents: number): string {
  return `${(cents / 100).toFixed(2)} €`;
}

export function AppPartnerLeadExchange({
  locale,
  dictionary,
}: {
  locale: Locale;
  dictionary: Record<string, string>;
}) {
  const native = useIsNative();
  const variant = useAppVariant();
  const preview = usePartnerPreview();
  const pathname = usePathname();
  const prefix = getLocalePrefix(locale);
  const active =
    (preview.enabled && preview.screen === "leadExchange") ||
    (isPath(pathname, prefix) && native === true && variant === "partner");

  const [data, setData] = useState<Payload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const t = (k: string, fb: string) => dictionary[k] ?? fb;

  const load = useCallback(async () => {
    setLoading(true);
    setError(false);
    try {
      const url = preview.enabled
        ? "/api/app/partner/demo?kind=leadExchange"
        : "/api/app/partner/lead-exchange";
      const res = await fetch(url, { cache: "no-store" });
      if (res.status === 401 && !preview.enabled) {
        window.location.assign(`${prefix}/portal/login`);
        return;
      }
      if (!res.ok) {
        setError(true);
        return;
      }
      setData((await res.json()) as Payload);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [prefix, preview.enabled]);

  useEffect(() => {
    if (active) void load();
  }, [active, load]);

  useEffect(() => {
    if (active) trackScreen("partner_lead_exchange");
  }, [active]);

  if (!active) return null;

  return (
    <div className="apppartner-root" role="region" aria-label="Berza lidova">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.lx.kicker", "Berza lidova")}</p>
          <h1 className="apppartner-title">{t("partner.lx.title", "Lead Exchange")}</h1>
          <p className="apppartner-sub">
            {t("partner.lx.sub", "Kupuj kvalifikovane upite po fer ceni.")}
          </p>
        </div>
      </div>

      <div className="apppartner-body">
        {loading && !data ? (
          <div className="apppartner-skel-grid" aria-hidden>
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="apppartner-skel" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("partner.lx.err", "Trenutno ne mogu da učitam berzu.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : data ? (
          <>
            <section className="apppartner-section">
              <div className="apppartner-kpi-grid">
                <div className="apppartner-kpi">
                  <span className="apppartner-kpi-label">
                    {t("partner.lx.purchased", "Kupljeno (mesec)")}
                  </span>
                  <span className="apppartner-kpi-value">{data.summary.purchasedThisMonth}</span>
                </div>
                <div className="apppartner-kpi">
                  <span className="apppartner-kpi-label">{t("partner.lx.spent", "Potrošeno")}</span>
                  <span className="apppartner-kpi-value">
                    {eur(data.summary.spentThisMonthCents)}
                  </span>
                </div>
              </div>
            </section>

            <section className="apppartner-section">
              <div className="apppartner-section-head">
                <h2 className="apppartner-h2">{t("partner.lx.bidsTitle", "Tvoje ponude")}</h2>
                <Link
                  href={`${prefix}/portal/lead-exchange`}
                  className="apppartner-link"
                  onClick={() => void nativeHaptic()}
                >
                  {t("partner.lx.manage", "Upravljaj")} →
                </Link>
              </div>
              {data.bids.length === 0 ? (
                <p className="apppartner-empty-line">
                  {t(
                    "partner.lx.noBids",
                    "Nemaš aktivnih ponuda. Definiši kategoriju i maksimalnu cenu po lidu.",
                  )}
                </p>
              ) : (
                <ul className="apppartner-list">
                  {data.bids.map((b) => (
                    <li key={b.id} className="apppartner-list-item">
                      <div className="apppartner-list-link" data-static>
                        <div className="apppartner-list-row">
                          <span className="apppartner-list-title">
                            {b.category}
                            {b.city ? ` · ${b.city}` : ""}
                          </span>
                          <span
                            className={`apppartner-pill ${
                              b.isActive ? "apppartner-pill-good" : "apppartner-pill-muted"
                            }`}
                          >
                            {b.isActive ? "Aktivno" : "Pauzirano"}
                          </span>
                        </div>
                        <div className="apppartner-list-meta">
                          <span>
                            {t("partner.lx.max", "Max")}: {eur(b.maxLeadPriceCents)}
                          </span>
                          <span>
                            · {t("partner.lx.monthly", "Mesečno")}: {eur(b.monthlyCapCents)}
                          </span>
                        </div>
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </section>

            {data.summary.recent.length > 0 ? (
              <section className="apppartner-section">
                <h2 className="apppartner-h2">{t("partner.lx.recent", "Skorašnje kupovine")}</h2>
                <ul className="apppartner-list">
                  {data.summary.recent.slice(0, 10).map((p, i) => (
                    <li key={p.id ?? i} className="apppartner-list-item">
                      <div className="apppartner-list-link" data-static>
                        <div className="apppartner-list-row">
                          <span className="apppartner-list-title">
                            {p.listingLead?.name ?? "—"}
                          </span>
                          <span className="apppartner-pill apppartner-pill-good">
                            {eur(p.priceCents)}
                          </span>
                        </div>
                        {p.listingLead?.message ? (
                          <p className="apppartner-list-msg">{p.listingLead.message}</p>
                        ) : null}
                      </div>
                    </li>
                  ))}
                </ul>
              </section>
            ) : null}
          </>
        ) : null}
      </div>
    </div>
  );
}

export default AppPartnerLeadExchange;