"use client";

/**
 * AppJobs — NATIVE "Poslovi" ekran.
 *
 * Renderuje se SAMO u Capacitor native ljusci I kada je ruta tačno
 * `/poslovi` (+ `/en/poslovi`) — NE na detalju `/poslovi/<slug>` (njega
 * nosi web u native ljusci). Pun fixed overlay (isti pristup kao
 * AppCatalog/AppFinder); na web-u vraća `null` → web bajt-identičan.
 *
 * Podaci iz read-only `/api/app/jobs` (wrap nad `listPublicJobs()`).
 * Svaka kartica vodi u POSTOJEĆU rutu `/poslovi/<slug>`.
 */

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

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import { trackScreen } from "@/lib/native/analytics";
import { getLocalePrefix, type Locale } from "@/lib/i18n/i18n";

type Job = {
  id: string;
  title: string;
  slug: string;
  company: string;
  companySlug: string | null;
  city: string | null;
  isRemote: boolean;
  employmentType: string | null;
  coverUrl: string | null;
  isBoosted: boolean;
};

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

export function AppJobs({
  locale,
  dictionary,
}: {
  locale: Locale;
  dictionary: Record<string, string>;
}) {
  const native = useIsNative();
  const pathname = usePathname();
  const prefix = getLocalePrefix(locale);
  const t = (k: string, fb: string) => dictionary[k] ?? fb;

  const isJobsRoute = useMemo(() => {
    const path =
      prefix && pathname.startsWith(prefix)
        ? pathname.slice(prefix.length)
        : pathname;
    const norm = path.replace(/\/+$/, "") || "/";
    return norm === "/poslovi";
  }, [pathname, prefix]);

  const [items, setItems] = useState<Job[] | null>(null);
  const [q, setQ] = useState("");
  const [error, setError] = useState(false);

  const load = useCallback(async (query: string) => {
    setError(false);
    try {
      const res = await fetch(
        `/api/app/jobs${query ? `?q=${encodeURIComponent(query)}` : ""}`,
        { cache: "no-store" },
      );
      if (!res.ok) throw new Error("bad");
      const j = (await res.json()) as { items: Job[] };
      setItems(Array.isArray(j.items) ? j.items : []);
    } catch {
      setError(true);
      setItems([]);
    }
  }, []);

  useEffect(() => {
    if (native === true && isJobsRoute) void load("");
  }, [native, isJobsRoute, load]);

  useEffect(() => {
    if (native === true && isJobsRoute) trackScreen("jobs");
  }, [native, isJobsRoute]);

  if (native !== true || !isJobsRoute) return null;

  const loading = items === null;

  return (
    <div className="appjobs-root" role="region" aria-label={t("nav.jobs", "Poslovi")}>
      <div className="appjobs-hero">
        <p className="appjobs-title">{t("app.jobs.title", "Poslovi")}</p>
        <p className="appjobs-sub">
          {t("app.jobs.subtitle", "Otvorene pozicije u kompanijama širom Srbije")}
        </p>
        <form
          className="appjobs-searchbox"
          onSubmit={(e) => {
            e.preventDefault();
            void nativeHaptic();
            setItems(null);
            void load(q);
          }}
        >
          <svg
            width={18}
            height={18}
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            aria-hidden
          >
            <circle cx="11" cy="11" r="7" />
            <path d="m20 20-3.5-3.5" />
          </svg>
          <input
            className="appjobs-input"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder={t("app.jobs.searchPlaceholder", "Pretraži pozicije, firme…")}
            inputMode="search"
            aria-label={t("app.jobs.searchPlaceholder", "Pretraži pozicije, firme…")}
          />
        </form>
      </div>

      <div className="appjobs-body">
        {loading ? (
          <div className="appjobs-skel-wrap" aria-hidden>
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="appjobs-skel" />
            ))}
          </div>
        ) : error ? (
          <div className="appjobs-empty">
            <p>{t("app.jobs.error", "Nešto je pošlo po zlu.")}</p>
            <button
              type="button"
              className="appjobs-retry"
              onClick={() => {
                void nativeHaptic();
                setItems(null);
                void load(q);
              }}
            >
              {t("app.jobs.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : items.length === 0 ? (
          <div className="appempty">
            <span className="appempty-glyph" aria-hidden>
              <svg
                width={32}
                height={32}
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={1.6}
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <rect x="3" y="7" width="18" height="13" rx="2" />
                <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
                <path d="M3 12h18" />
              </svg>
            </span>
            <p className="appempty-title">
              {q.trim()
                ? t("app.jobs.empty.query", "Nema rezultata za tvoju pretragu")
                : t("app.jobs.empty", "Trenutno nema otvorenih pozicija.")}
            </p>
            <p className="appempty-hint">
              {q.trim()
                ? t(
                    "app.jobs.empty.queryHint",
                    "Probaj drugu reč ili pogledaj sve otvorene pozicije.",
                  )
                : t(
                    "app.jobs.empty.hint",
                    "Nove pozicije stižu redovno. U međuvremenu pogledaj firme koje zapošljavaju.",
                  )}
            </p>
            {q.trim() ? (
              <button
                type="button"
                className="appempty-cta"
                onClick={() => {
                  void nativeHaptic();
                  setQ("");
                  void load("");
                }}
              >
                {t("app.jobs.empty.clear", "Prikaži sve pozicije")}
              </button>
            ) : (
              <Link
                href={`${prefix}/kompanije`}
                className="appempty-cta"
                onClick={() => void nativeHaptic()}
              >
                {t("app.jobs.empty.cta", "Pogledaj firme")}
              </Link>
            )}
          </div>
        ) : (
          <div className="appjobs-list">
            {items.map((j) => (
              <Link
                key={j.id}
                href={`${prefix}/poslovi/${j.slug}`}
                className="appjobs-card"
                data-boost={j.isBoosted ? "1" : "0"}
                onClick={() => void nativeHaptic()}
              >
                <span className="appjobs-card-top">
                  <span className="appjobs-card-title">{j.title}</span>
                  {j.isRemote ? (
                    <span className="appjobs-tag appjobs-tag-remote">
                      {t("app.jobs.remote", "Remote")}
                    </span>
                  ) : null}
                </span>
                <span className="appjobs-card-company">{j.company}</span>
                <span className="appjobs-card-meta">
                  {[j.city, j.employmentType].filter(Boolean).join("  ·  ") ||
                    " "}
                </span>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default AppJobs;