"use client";

/**
 * NativeRationaleHost — native modal koji objašnjava zašto tražimo
 * permisiju (lokacija/push), PRE sistemskog dijaloga. Registruje handler
 * u `lib/native/rationale.ts`; `getNativeCoords()` i push-bootstrap ga
 * pozovu i čekaju korisnikov izbor.
 *
 * Renderuje se SAMO u Capacitor native ljusci; na web-u vraća `null`
 * (web ostaje bajt-identičan). Mount: jednom, u `NativeLayer`.
 */

import { useEffect, useRef, useState } from "react";

import { nativeHaptic } from "@/components/native/CapacitorBootstrap";
import {
  registerRationaleHandler,
  type RationaleSpec,
} from "@/lib/native/rationale";

export function NativeRationaleHost() {
  const [isNative, setIsNative] = useState(false);
  const [spec, setSpec] = useState<RationaleSpec | null>(null);
  const resolverRef = useRef<((v: boolean) => void) | null>(null);

  useEffect(() => {
    let disposed = false;
    (async () => {
      try {
        const { Capacitor } = await import("@capacitor/core");
        if (!disposed && Capacitor.isNativePlatform()) setIsNative(true);
      } catch {
        /* no-op */
      }
    })();
    return () => {
      disposed = true;
    };
  }, []);

  useEffect(() => {
    if (!isNative) return;
    const unregister = registerRationaleHandler(
      (s) =>
        new Promise<boolean>((resolve) => {
          resolverRef.current = resolve;
          setSpec(s);
        }),
    );
    return unregister;
  }, [isNative]);

  if (!isNative || !spec) return null;

  const settle = (v: boolean) => {
    void nativeHaptic();
    const r = resolverRef.current;
    resolverRef.current = null;
    setSpec(null);
    if (r) r(v);
  };

  return (
    <div
      className="native-rationale"
      role="alertdialog"
      aria-modal="true"
      aria-label={spec.title}
    >
      <button
        type="button"
        className="native-rationale-scrim"
        aria-label={spec.cancel}
        onClick={() => settle(false)}
      />
      <div className="native-rationale-card">
        <h2 className="native-rationale-title">{spec.title}</h2>
        <p className="native-rationale-body">{spec.body}</p>
        <button
          type="button"
          className="native-rationale-confirm"
          onClick={() => settle(true)}
        >
          {spec.confirm}
        </button>
        <button
          type="button"
          className="native-rationale-cancel"
          onClick={() => settle(false)}
        >
          {spec.cancel}
        </button>
      </div>
    </div>
  );
}

export default NativeRationaleHost;