"use client";

/**
 * AppPartnerQuestions — native overlay za /portal/pitanja (Q&A javnog profila).
 * Filter: Pending / Published / Rejected / All.
 */

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 Q = {
  id: string;
  question: string;
  answer: string | null;
  status: "PENDING" | "PUBLISHED" | "REJECTED";
  askedBy: string | null;
  createdAt: string;
  answeredAt: string | null;
};

type Payload = { items: Q[]; counts: Record<string, number> };
type Filter = "ALL" | "PENDING" | "PUBLISHED" | "REJECTED";

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/pitanja";
}

function timeAgo(iso: string): string {
  const diff = Math.max(0, Date.now() - new Date(iso).getTime());
  const m = Math.floor(diff / 60000);
  if (m < 1) return "sad";
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h`;
  return `${Math.floor(h / 24)}d`;
}

export function AppPartnerQuestions({
  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 === "questions") ||
    (isPath(pathname, prefix) && native === true && variant === "partner");

  const [data, setData] = useState<Payload | null>(null);
  const [filter, setFilter] = useState<Filter>("PENDING");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [answer, setAnswer] = useState("");
  const [busy, setBusy] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);

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

  const load = useCallback(
    async (f: Filter) => {
      setLoading(true);
      setError(false);
      try {
        const url = preview.enabled
          ? "/api/app/partner/demo?kind=questions"
          : `/api/app/partner/questions?status=${f}`;
        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;
        }
        const j = (await res.json()) as Payload;
        if (preview.enabled && f !== "ALL") {
          setData({
            ...j,
            items: j.items.filter((q) => q.status === f),
          });
        } else {
          setData(j);
        }
      } catch {
        setError(true);
      } finally {
        setLoading(false);
      }
    },
    [prefix, preview.enabled],
  );

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

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

  const submitAction = useCallback(
    async (id: string, action: "answer" | "reject", body?: string) => {
      setMsg(null);
      setBusy(id + ":" + action);
      try {
        if (preview.enabled) {
          await new Promise((r) => setTimeout(r, 500));
          setMsg(
            action === "answer"
              ? "Demo: pitanje bi bilo objavljeno."
              : "Demo: pitanje bi bilo odbijeno.",
          );
          setExpanded(null);
          setAnswer("");
          return;
        }
        const res = await fetch(`/api/portal/questions/${id}`, {
          method: "PATCH",
          headers: { "content-type": "application/json" },
          body: JSON.stringify(
            action === "answer"
              ? { action: "answer", answer: body, visibility: "PUBLISHED" }
              : { action: "reject" },
          ),
        });
        const j = (await res.json().catch(() => null)) as { error?: string } | null;
        if (!res.ok) {
          setMsg(j?.error ?? "Greška pri akciji.");
          return;
        }
        setExpanded(null);
        setAnswer("");
        await load(filter);
      } catch {
        setMsg("Greška pri akciji.");
      } finally {
        setBusy(null);
      }
    },
    [filter, load, preview.enabled],
  );

  if (!active) return null;

  const tabs: Array<{ key: Filter; label: string; count?: number }> = [
    { key: "PENDING", label: t("partner.q.tab.pending", "Na čekanju"), count: data?.counts.PENDING },
    { key: "PUBLISHED", label: t("partner.q.tab.published", "Objavljeno"), count: data?.counts.PUBLISHED },
    { key: "REJECTED", label: t("partner.q.tab.rejected", "Odbijeno"), count: data?.counts.REJECTED },
    { key: "ALL", label: t("partner.inbox.all", "Svi") },
  ];

  return (
    <div className="apppartner-root" role="region" aria-label="Pitanja">
      <div className="apppartner-hero apppartner-hero-compact">
        <div className="apppartner-hero-text">
          <p className="apppartner-kicker">{t("partner.q.kicker", "Pitanja")}</p>
          <h1 className="apppartner-title">{t("partner.q.title", "Pitanja kupaca")}</h1>
        </div>
      </div>

      <div className="apppartner-tabs" role="tablist">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            type="button"
            role="tab"
            aria-selected={filter === tab.key}
            className="apppartner-tab"
            data-active={filter === tab.key ? "true" : "false"}
            onClick={() => {
              void nativeHaptic();
              setFilter(tab.key);
            }}
          >
            {tab.label}
            {tab.count ? ` · ${tab.count}` : ""}
          </button>
        ))}
      </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 apppartner-skel-row" />
            ))}
          </div>
        ) : error ? (
          <div className="apppartner-empty">
            <p>{t("partner.q.err", "Trenutno ne mogu da učitam pitanja.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load(filter);
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : !data || data.items.length === 0 ? (
          <p className="apppartner-empty-line">
            {t("partner.q.empty", "Nema pitanja u ovoj kategoriji.")}
          </p>
        ) : (
          <ul className="apppartner-list">
            {data.items.map((q) => {
              const isOpen = expanded === q.id;
              const canAct = q.status === "PENDING";
              return (
                <li key={q.id} className="apppartner-list-item">
                  <div
                    className="apppartner-list-link"
                    role="button"
                    tabIndex={0}
                    onClick={() => {
                      void nativeHaptic();
                      setExpanded(isOpen ? null : q.id);
                      setAnswer("");
                      setMsg(null);
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        setExpanded(isOpen ? null : q.id);
                      }
                    }}
                  >
                    <div className="apppartner-list-row">
                      <span className="apppartner-list-title">
                        {q.askedBy || t("partner.q.anon", "Anoniman")}
                      </span>
                      <span
                        className={`apppartner-pill ${
                          q.status === "PENDING"
                            ? "apppartner-pill-new"
                            : q.status === "PUBLISHED"
                              ? "apppartner-pill-good"
                              : "apppartner-pill-muted"
                        }`}
                      >
                        {q.status === "PENDING"
                          ? t("partner.q.tab.pending", "Na čekanju")
                          : q.status === "PUBLISHED"
                            ? t("partner.q.tab.published", "Objavljeno")
                            : t("partner.q.tab.rejected", "Odbijeno")}
                      </span>
                    </div>
                    <p className="apppartner-list-msg">{q.question}</p>
                    {q.answer ? (
                      <p className="apppartner-list-answer">↳ {q.answer}</p>
                    ) : null}
                    <div className="apppartner-list-meta">
                      <span>{timeAgo(q.createdAt)}</span>
                    </div>

                    {isOpen && canAct ? (
                      <div className="apppartner-form" onClick={(e) => e.stopPropagation()}>
                        <label className="apppartner-label" htmlFor={`a-${q.id}`}>
                          {t("partner.q.answer.label", "Tvoj odgovor")}
                        </label>
                        <textarea
                          id={`a-${q.id}`}
                          className="apppartner-input apppartner-textarea"
                          rows={3}
                          value={answer}
                          onChange={(e) => setAnswer(e.target.value)}
                          placeholder={t(
                            "partner.q.answer.placeholder",
                            "Odgovori jasno i konkretno — pojaviće se na javnom profilu.",
                          )}
                        />
                        <div className="apppartner-form-actions">
                          <button
                            type="button"
                            className="apppartner-btn-primary apppartner-btn-block"
                            disabled={busy === q.id + ":answer" || answer.trim().length < 2}
                            onClick={() => {
                              void nativeHaptic();
                              void submitAction(q.id, "answer", answer.trim());
                            }}
                          >
                            {busy === q.id + ":answer"
                              ? t("partner.q.publishing", "Objavljujem…")
                              : t("partner.q.publish", "Objavi odgovor")}
                          </button>
                          <button
                            type="button"
                            className="apppartner-btn-ghost"
                            disabled={busy === q.id + ":reject"}
                            onClick={() => {
                              void nativeHaptic();
                              void submitAction(q.id, "reject");
                            }}
                          >
                            {busy === q.id + ":reject"
                              ? t("partner.q.rejecting", "Odbijam…")
                              : t("partner.q.reject", "Odbij")}
                          </button>
                        </div>
                        {msg ? <p className="apppartner-form-msg">{msg}</p> : null}
                      </div>
                    ) : null}
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppPartnerQuestions;