import type { MetaFunction } from "@remix-run/node";
import { ClientOnly } from "../components/ClientOnly";
import { Suspense, useState } from "react";
import ProfilePagesHeader from "../components/ProfilePagesHeader";
import { lazyWithPreload } from "~/utils/lazy-import";
import { MapPin } from "lucide-react";

export const meta: MetaFunction = () => {
  return [
    { title: "افزودن آدرس" },
    {
      name: "description",
      content: "افزودن آدرس برای انتخاب موقعیت و دریافت آدرس",
    },
  ];
};

export default function AddLocation() {
  const [showMap, setShowMap] = useState(false);

  return (
    <div className="flex flex-col gap-2 w-full">
      <ProfilePagesHeader title="افزودن آدرس" />

      {!showMap ? (
        // Show form first with option to use map
        <ClientOnly
          fallback={
            <div className="h-[200px] w-full bg-WHITE3 flex items-center justify-center">
              در حال بارگذاری...
            </div>
          }
        >
          {() => {
            const InteractiveMap = lazyWithPreload(
              () => import("../components/InteractiveMap")
            );
            return (
              <Suspense
                fallback={
                  <div className="h-[200px] w-full bg-WHITE3 flex items-center justify-center animate-pulse">
                    <div className="flex flex-col items-center gap-2">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                      <span className="text-GRAY">در حال بارگذاری...</span>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-col gap-4">
                  {/* Button to show map */}
                  <div className="px-4">
                    <button
                      onClick={() => setShowMap(true)}
                      className="w-full flex items-center justify-center gap-2 py-3 px-4 border-2 border-dashed border-GRAY2 rounded-lg text-GRAY hover:border-primary hover:text-primary transition-colors"
                    >
                      <MapPin className="w-5 h-5" />
                      <span>انتخاب آدرس از روی نقشه</span>
                    </button>
                  </div>

                  {/* Form only mode */}
                  <InteractiveMap formOnly={true} />
                </div>
              </Suspense>
            );
          }}
        </ClientOnly>
      ) : (
        // Show map when user clicks the button
        <ClientOnly
          fallback={
            <div className="h-[500px] w-full bg-WHITE3 flex items-center justify-center">
              در حال بارگذاری نقشه...
            </div>
          }
        >
          {() => {
            const InteractiveMap = lazyWithPreload(
              () => import("../components/InteractiveMap")
            );
            return (
              <Suspense
                fallback={
                  <div className="h-[500px] w-full bg-WHITE3 flex items-center justify-center animate-pulse">
                    <div className="flex flex-col items-center gap-2">
                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                      <span className="text-GRAY">
                        در حال بارگذاری نقشه...
                      </span>
                    </div>
                  </div>
                }
              >
                <div className="flex flex-col gap-2">
                  {/* Back button */}
                  <div className="px-4">
                    <button
                      onClick={() => setShowMap(false)}
                      className="flex items-center gap-2 text-GRAY hover:text-primary transition-colors"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <polyline points="9 18 15 12 9 6"></polyline>
                      </svg>
                      <span>بازگشت به فرم</span>
                    </button>
                  </div>
                  <InteractiveMap />
                </div>
              </Suspense>
            );
          }}
        </ClientOnly>
      )}
    </div>
  );
}