"use client";

/**
 * AppPartnerBookings — native overlay za /portal/rezervacije.
 * Statistika + dva tabа: Predstojeće / Prošle.
 */

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

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import {
  CalendarIcon,
  MailIcon,
  PhoneIcon,
  UsersIcon,
} from "@/components/native/PartnerIcons";
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 Booking = {
  id: string;
  customerName: string;
  customerEmail: string;
  customerPhone: string | null;
  status: string;
  startAt: string | null;
  endAt: string | null;
  partySize: number;
  notes: string | null;
};

type Payload = {
  stats: {
    upcoming: number;
    today: number;
    pending: number;
    confirmed: number;
    cancelled: number;
  } | null;
  upcoming: Booking[];
  past: Booking[];
};

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

function fmtDateTime(iso: string | null): string {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleString("sr-RS", {
      day: "2-digit",
      month: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso.slice(0, 16).replace("T", " ");
  }
}

function statusPill(s: string): { label: string; cls: string } {
  switch (s) {
    case "CONFIRMED":
      return { label: "Potvrđeno", cls: "apppartner-pill-good" };
    case "PENDING":
      return { label: "Na čekanju", cls: "apppartner-pill-new" };
    case "CANCELLED":
    case "CANCELED":
      return { label: "Otkazano", cls: "apppartner-pill-muted" };
    case "COMPLETED":
      return { label: "Završeno", cls: "apppartner-pill-muted" };
    case "NO_SHOW":
      return { label: "Nije se pojavio", cls: "apppartner-pill-muted" };
    default:
      return { label: s, cls: "apppartner-pill-muted" };
  }
}

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

  const [data, setData] = useState<Payload | null>(null);
  const [tab, setTab] = useState<"upcoming" | "past">("upcoming");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  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 () => {
    setLoading(true);
    setError(false);
    try {
      const url = preview.enabled
        ? "/api/app/partner/demo?kind=bookings"
        : "/api/app/partner/bookings";
      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_bookings");
  }, [active]);

  const submitAction = useCallback(
    async (id: string, action: "confirm" | "cancel") => {
      setMsg(null);
      setBusy(id + ":" + action);
      try {
        if (preview.enabled) {
          await new Promise((r) => setTimeout(r, 500));
          setMsg(action === "confirm" ? "Demo: potvrđeno." : "Demo: otkazano.");
          setExpanded(null);
          return;
        }
        const res = await fetch(`/api/bookings/${id}/${action}`, {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: action === "cancel" ? JSON.stringify({ reason: "Otkazao partner" }) : "{}",
        });
        const j = (await res.json().catch(() => null)) as { error?: string } | null;
        if (!res.ok) {
          setMsg(j?.error ?? "Greška pri akciji.");
          return;
        }
        setExpanded(null);
        await load();
      } catch {
        setMsg("Greška pri akciji.");
      } finally {
        setBusy(null);
      }
    },
    [load, preview.enabled],
  );

  if (!active) return null;

  const list = tab === "upcoming" ? data?.upcoming ?? [] : data?.past ?? [];

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

      <div className="apppartner-body">
        {data?.stats ? (
          <div className="apppartner-kpi-grid">
            <div className="apppartner-kpi">
              <span className="apppartner-kpi-label">{t("partner.book.upcoming", "Predstojeće")}</span>
              <span className="apppartner-kpi-value">{data.stats.upcoming}</span>
              <span className="apppartner-kpi-meta">
                {t("partner.book.today", "Danas")}: {data.stats.today}
              </span>
            </div>
            <div className="apppartner-kpi" data-tone={data.stats.pending > 0 ? "accent" : "neutral"}>
              <span className="apppartner-kpi-label">{t("partner.book.pending", "Na čekanju")}</span>
              <span className="apppartner-kpi-value">{data.stats.pending}</span>
              <span className="apppartner-kpi-meta">
                {t("partner.book.confirmed", "Potvrđeno")}: {data.stats.confirmed}
              </span>
            </div>
          </div>
        ) : null}

        <div className="apppartner-tabs" role="tablist">
          {(["upcoming", "past"] as const).map((k) => (
            <button
              key={k}
              type="button"
              role="tab"
              aria-selected={tab === k}
              className="apppartner-tab"
              data-active={tab === k ? "true" : "false"}
              onClick={() => {
                void nativeHaptic();
                setTab(k);
              }}
            >
              {k === "upcoming"
                ? t("partner.book.upcoming", "Predstojeće")
                : t("partner.book.past", "Prošle")}
            </button>
          ))}
        </div>

        {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.book.err", "Trenutno ne mogu da učitam rezervacije.")}</p>
            <button
              type="button"
              className="apppartner-btn-primary"
              onClick={() => {
                void nativeHaptic();
                void load();
              }}
            >
              {t("common.retry", "Pokušaj ponovo")}
            </button>
          </div>
        ) : list.length === 0 ? (
          <p className="apppartner-empty-line">
            {tab === "upcoming"
              ? t("partner.book.empty.upcoming", "Nema predstojećih rezervacija.")
              : t("partner.book.empty.past", "Nema prošlih rezervacija.")}
          </p>
        ) : (
          <ul className="apppartner-list">
            {list.map((b) => {
              const sp = statusPill(b.status);
              const isOpen = expanded === b.id;
              const canConfirm = b.status === "PENDING";
              const canCancel = b.status === "PENDING" || b.status === "CONFIRMED";
              return (
                <li key={b.id} className="apppartner-list-item">
                  <div
                    className="apppartner-list-link"
                    role="button"
                    tabIndex={0}
                    onClick={() => {
                      void nativeHaptic();
                      setExpanded(isOpen ? null : b.id);
                      setMsg(null);
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        setExpanded(isOpen ? null : b.id);
                      }
                    }}
                  >
                    <div className="apppartner-list-row">
                      <span className="apppartner-list-title">{b.customerName}</span>
                      <span className={`apppartner-pill ${sp.cls}`}>{sp.label}</span>
                    </div>
                    <p className="apppartner-list-msg apppartner-list-msg-icons">
                      <span className="apppartner-msg-chip">
                        <CalendarIcon />
                        {fmtDateTime(b.startAt)}
                      </span>
                      <span className="apppartner-msg-chip">
                        <UsersIcon />
                        {b.partySize}
                      </span>
                      {b.notes ? (
                        <span className="apppartner-msg-note">
                          {b.notes.slice(0, 60)}
                        </span>
                      ) : null}
                    </p>
                    <div className="apppartner-list-contact">
                      {b.customerPhone ? (
                        <a
                          href={`tel:${b.customerPhone}`}
                          className="apppartner-mini-action"
                          onClick={(e) => {
                            e.stopPropagation();
                            void nativeHaptic();
                          }}
                        >
                          <PhoneIcon />
                          {b.customerPhone}
                        </a>
                      ) : null}
                      <a
                        href={`mailto:${b.customerEmail}`}
                        className="apppartner-mini-action"
                        onClick={(e) => {
                          e.stopPropagation();
                          void nativeHaptic();
                        }}
                      >
                        <MailIcon />
                        {b.customerEmail}
                      </a>
                    </div>

                    {isOpen && (canConfirm || canCancel) ? (
                      <div className="apppartner-form-actions" onClick={(e) => e.stopPropagation()}>
                        {canConfirm ? (
                          <button
                            type="button"
                            className="apppartner-btn-primary apppartner-btn-block"
                            disabled={busy === b.id + ":confirm"}
                            onClick={() => {
                              void nativeHaptic();
                              void submitAction(b.id, "confirm");
                            }}
                          >
                            {busy === b.id + ":confirm"
                              ? t("partner.book.confirming", "Potvrđujem…")
                              : t("partner.book.confirm", "✓ Potvrdi")}
                          </button>
                        ) : null}
                        {canCancel ? (
                          <button
                            type="button"
                            className="apppartner-btn-ghost"
                            disabled={busy === b.id + ":cancel"}
                            onClick={() => {
                              void nativeHaptic();
                              void submitAction(b.id, "cancel");
                            }}
                          >
                            {busy === b.id + ":cancel"
                              ? t("partner.book.cancelling", "Otkazujem…")
                              : t("partner.book.cancel", "✕ Otkaži")}
                          </button>
                        ) : null}
                      </div>
                    ) : null}
                    {isOpen && msg ? <p className="apppartner-form-msg">{msg}</p> : null}
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </div>
  );
}

export default AppPartnerBookings;