"use client";

import { Smartphone } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { resolveAssetUrl } from "@/lib/media";

type ScooterARViewerProps = {
  glbUrl?: string;
  usdzUrl?: string;
  posterImage: string;
  scooterName: string;
};

export function ScooterARViewer({
  glbUrl,
  usdzUrl,
  posterImage,
  scooterName,
}: ScooterARViewerProps) {
  const [viewerReady, setViewerReady] = useState(false);
  const [siteOrigin, setSiteOrigin] = useState("");
  const [permissionMessage, setPermissionMessage] = useState("");
  const [showFallbackLinks, setShowFallbackLinks] = useState(false);
  const ext = glbUrl?.split("?")[0].split(".").pop()?.toLowerCase() ?? "";
  const arReady = ext === "glb" || ext === "gltf";
  const resolvedGlbUrl = resolveAssetUrl(glbUrl);
  const resolvedUsdzUrl = resolveAssetUrl(usdzUrl);
  const resolvedPoster = resolveAssetUrl(posterImage);

  const absoluteGlbUrl = useMemo(() => {
    if (!resolvedGlbUrl) return "";
    if (!siteOrigin) return resolvedGlbUrl;
    try {
      return new URL(resolvedGlbUrl, siteOrigin).toString();
    } catch {
      return resolvedGlbUrl;
    }
  }, [resolvedGlbUrl, siteOrigin]);

  const absoluteUsdzUrl = useMemo(() => {
    if (!resolvedUsdzUrl) return "";
    if (!siteOrigin) return resolvedUsdzUrl;
    try {
      return new URL(resolvedUsdzUrl, siteOrigin).toString();
    } catch {
      return resolvedUsdzUrl;
    }
  }, [resolvedUsdzUrl, siteOrigin]);

  const androidSceneViewerIntent = useMemo(() => {
    if (!absoluteGlbUrl) return "";
    const file = encodeURIComponent(absoluteGlbUrl);
    const title = encodeURIComponent(scooterName);
    const fallback = encodeURIComponent(siteOrigin || "/");
    return `intent://arvr.google.com/scene-viewer/1.0?file=${file}&title=${title}#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=${fallback};end;`;
  }, [absoluteGlbUrl, scooterName, siteOrigin]);

  useEffect(() => {
    if (!glbUrl || !arReady) {
      return;
    }

    let active = true;

    import("@google/model-viewer")
      .then(() => {
        if (active) {
          setViewerReady(true);
        }
      })
      .catch(() => {
        if (active) {
          setViewerReady(false);
        }
      });

    return () => {
      active = false;
    };
  }, [arReady, glbUrl]);

  useEffect(() => {
    setSiteOrigin(window.location.origin);
  }, []);

  async function requestCameraAndOpenAR() {
    setPermissionMessage("");
    setShowFallbackLinks(false);

    const viewer = document.getElementById("scooter-ar-viewer") as
      | ({ activateAR?: () => void } & HTMLElement)
      | null;
    if (viewer?.activateAR) {
      try {
        viewer.activateAR();
        return;
      } catch {
        // Fall through to fallback actions.
      }
    }

    if (!window.isSecureContext) {
      setPermissionMessage("AR needs HTTPS on mobile. Open this page on a secure (https) URL.");
    } else {
      setPermissionMessage("Direct AR launch is not available in this browser. Use fallback AR buttons below.");
    }
    setShowFallbackLinks(true);
  }

  return (
    <section className="bg-white py-6">
      <div className="container-custom">
        <div className="grid gap-5 rounded-[1.5rem] border border-ev/25 bg-ev-soft/50 p-5 shadow-card md:grid-cols-[15rem_1fr] md:p-6">
          <div>
            <div className="flex items-center gap-3">
              <span className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white text-ev-deep shadow-sm">
                <Smartphone className="h-5 w-5" />
              </span>
              <h2 className="text-2xl font-bold text-ev-deep">View in AR</h2>
            </div>
            <p className="mt-4 text-sm leading-6 text-navy-muted">
              See how {scooterName} looks in your space with Augmented Reality.
            </p>
            {!glbUrl ? (
              <p className="mt-5 rounded-xl bg-white px-4 py-3 text-sm font-semibold text-navy-muted shadow-sm">
                AR model coming soon
              </p>
            ) : !arReady ? (
              <p className="mt-5 rounded-xl bg-white px-4 py-3 text-sm font-semibold text-navy-muted shadow-sm">
                AR requires GLB/GLTF (+ USDZ for iPhone Quick Look)
              </p>
            ) : null}
          </div>

          <div className="min-h-72 rounded-2xl border border-ev/20 bg-white p-4">
            {glbUrl && arReady ? (
              <model-viewer
                id="scooter-ar-viewer"
                src={resolvedGlbUrl}
                ios-src={resolvedUsdzUrl}
                poster={resolvedPoster}
                alt={`${scooterName} AR model`}
                ar
                ar-modes="webxr scene-viewer quick-look"
                quick-look-browsers="safari chrome"
                ar-scale="fixed"
                ar-placement="floor"
                camera-controls
                auto-rotate
                reveal="interaction"
                loading="lazy"
                ar-status="not-presenting"
                className="h-80 w-full rounded-xl bg-gradient-to-br from-white to-ev-soft"
              >
                <Button slot="ar-button" className="absolute bottom-4 left-4" variant="green">
                  View in AR
                </Button>
              </model-viewer>
            ) : glbUrl ? (
              <div className="flex h-full min-h-64 flex-col items-center justify-center text-center">
                <Smartphone className="h-14 w-14 text-ev-deep" />
                <h3 className="mt-4 text-xl font-bold text-navy-deep">
                  AR not available for this format
                </h3>
                <p className="mt-2 max-w-md text-sm leading-6 text-navy-muted">
                  This model format is supported for 3D preview, but AR currently needs GLB/GLTF
                  and optional USDZ for iOS.
                </p>
              </div>
            ) : (
              <div className="flex h-full min-h-64 flex-col items-center justify-center text-center">
                <Smartphone className="h-14 w-14 text-ev-deep" />
                <h3 className="mt-4 text-xl font-bold text-navy-deep">
                  AR model coming soon
                </h3>
                <p className="mt-2 max-w-md text-sm leading-6 text-navy-muted">
                  Upload GLB and USDZ files to enable mobile AR for this scooter.
                </p>
              </div>
            )}
            {absoluteGlbUrl ? (
              <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
                {arReady ? (
                  <Button onClick={requestCameraAndOpenAR} variant="green" size="sm">
                    View in AR
                  </Button>
                ) : null}
                {showFallbackLinks && androidSceneViewerIntent ? (
                  <a
                    href={androidSceneViewerIntent}
                    className="inline-flex h-9 items-center justify-center rounded-lg border border-primary/30 bg-white px-3 text-sm font-semibold text-primary-deep hover:border-primary hover:bg-primary-soft"
                  >
                    Open on Android AR
                  </a>
                ) : null}
                {showFallbackLinks && absoluteUsdzUrl ? (
                  <a
                    href={absoluteUsdzUrl}
                    rel="ar"
                    className="inline-flex h-9 items-center justify-center rounded-lg border border-ev/30 bg-white px-3 text-sm font-semibold text-ev-deep hover:border-ev hover:bg-ev-soft"
                  >
                    Open on iPhone AR
                  </a>
                ) : null}
              </div>
            ) : null}
            {permissionMessage ? (
              <p className="mt-3 text-center text-sm font-semibold text-amber-700">
                {permissionMessage}
              </p>
            ) : null}
            <p className="mt-4 text-center text-sm font-medium text-navy-muted md:hidden">
              Tap View in AR to place this scooter in your space.
            </p>
            <p className="mt-4 hidden text-center text-sm font-medium text-navy-muted md:block">
              Open this page on your phone to view this scooter in AR.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}