import type { MetaFunction } from "@remix-run/node";
import { Copy, Check } from "lucide-react";
import HeaderWithSupport from "../components/HeaderWithSupport";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import AppInput from "../components/AppInput";
import { Button } from "../components/ui/button";
import {
  useSellerData,
  useInstagramVerification,
} from "../requestHandler/use-seller-hooks";
import { useStoreOwnership } from "../hooks/useStoreOwnership";
import { LoadingModal } from "./store.add.manual.$storeId";
import { safeGoBack } from "~/utils/helpers";

export const meta: MetaFunction = () => {
  return [
    { title: "احراز اینستاگرام - ویترون" },
    {
      name: "description",
      content:
        "احراز هویت اکانت اینستاگرام فروشگاه شما در ویترون. تایید مالکیت و اتصال به پروفایل اینستاگرام.",
    },
    {
      name: "keywords",
      content: "احراز اینستاگرام، تایید هویت، فروشگاه، اینستاگرام، ویترون",
    },
    { name: "robots", content: "noindex, follow" },
    { property: "og:title", content: "احراز اینستاگرام - ویترون" },
    {
      property: "og:description",
      content:
        "احراز هویت اکانت اینستاگرام فروشگاه شما در ویترون. تایید مالکیت و اتصال به پروفایل اینستاگرام.",
    },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: "احراز اینستاگرام - ویترون" },
    {
      name: "twitter:description",
      content:
        "احراز هویت اکانت اینستاگرام فروشگاه شما در ویترون. تایید مالکیت و اتصال به پروفایل اینستاگرام.",
    },
  ];
};

export default function AddInstagram() {
  const { storeId } = useParams();
  const { data, isPending } = useSellerData(storeId);
  const navigate = useNavigate();
  const [instagramUsername, setInstagramUsername] = useState("");
  const verificationLink = instagramUsername
    ? `${import.meta.env.VITE_DOMAIN_URL || "https://vitrown.com"}/seller/${instagramUsername}`
    : "";

  // Check store ownership - this will redirect if user doesn't own the store
  const { isLoading: isOwnershipLoading } = useStoreOwnership(storeId);

  useEffect(() => {
    setInstagramUsername(data?.instagramId || "");
  }, [data?.instagramId]);
  const [copied, setCopied] = useState(false);

  // Instagram verification mutation
  const instagramVerificationMutation = useInstagramVerification();

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(verificationLink);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
    } catch (err) {
      console.error("Failed to copy: ", err);
    }
  };

  const handleContinue = async () => {
    try {
      const res = await instagramVerificationMutation.mutateAsync({
        instagramUsername: instagramUsername,
      });
      if (res.isVerified) {
        navigate(`/store/${storeId}`);
      }
      // Success - you can add success logic here like navigation or showing success message
      console.log("Instagram verification initiated successfully");
    } catch (error) {
      console.error("Failed to verify Instagram:", error);
      // Handle error - you can show an error toast or message
    }
  };

  // Show loading while checking ownership
  if (isOwnershipLoading) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-0 w-full pb-20 lg:max-w-[760px] lg:mx-auto lg:pt-6">
      <HeaderWithSupport
        title="احراز اکانت اینستاگرام"
        onBack={() => safeGoBack(navigate)}
      />

      {/* main content */}
      <div className="flex flex-col gap-6 p-4">
        {/* Instagram Username Input */}
        <AppInput
          disabled={isPending}
          inputTitle="آدرس صفحه اینستاگرام:"
          inputValue={instagramUsername}
          inputPlaceholder={
            isPending ? "در حال بررسی اکانت..." : "مثل: abc.123"
          }
          inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            setInstagramUsername(e.target.value)
          }
          inputDir="ltr"
        />

        <p className="text-sm text-BLACK2">
          شما این آیدی اینستاگرام را هنگام ثبت نام فروشگاه خود وارد کرده اید
          لطفا دقت کنید که این آیدی اینستاگرام باید درست باشد در غیر اینصورت
          همینجا میتوانید آنرا تصحیح کنید
        </p>

        {/* Bio Link Section */}
        <div className="flex flex-col gap-2 bg-WHITE3 p-4 rounded-lg">
          <p className="text-right text-sm text-BLACK2">
            لینک زیر را در قسمت بایو (Bio) بیو اینستاگرام خود قرار دهید:
          </p>
          <p className="text-right text-sm text-BLACK2">
            دقت کنید که باید بصورت لینک قرار دهید
          </p>

          <div className="flex items-center gap-2">
            <button
              onClick={handleCopyLink}
              className={`p-3 rounded-lg transition-all duration-200 ${
                copied
                  ? "bg-green-600 text-WHITE"
                  : "bg-BLACK text-WHITE hover:bg-BLACK2"
              }`}
            >
              {copied ? <Check size={20} /> : <Copy size={20} />}
            </button>
            <input
              type="text"
              value={verificationLink}
              readOnly
              className="flex-1 px-4 py-3 border border-GRAY3 rounded-lg bg-WHITE3 text-left focus:outline-none"
              dir="ltr"
            />
          </div>
        </div>
        <p className="text-sm text-BLACK2">
          برای امنیت بیشتر شما باید اکانت اینستاگرام خود را به صورت دستی احراز
          کنید برای این کار باید این لینک را در قسمت بایو (Bio) اینستاگرام خود
          قرار دهید و پس از زدن دکمه ادامه کمی صبر کنید تا اطلاعات شما احراز شود
        </p>
        <p className="text-sm text-BLACK2">
          پس از احراز شما میتوانید مجددا با زدن دکمه افزودن محصول از اینستاگرام
          پست های اینستاگرام خود را به فروشگاه خود اضافه کنید
        </p>
      </div>
      <div className="px-4 z-10 fixed bottom-20 w-full">
        <Button
          className="w-full"
          size="xl"
          variant="dark"
          onClick={handleContinue}
          disabled={
            instagramUsername.length < 5 ||
            instagramVerificationMutation.isPending
          }
        >
          {instagramVerificationMutation.isPending
            ? "در حال بررسی..."
            : "ادامه"}
        </Button>

        <LoadingModal
          open={instagramVerificationMutation.isPending}
          setOpen={() => {}}
          title="در حال تطبیق هویت فروشگاه..."
        />
      </div>
    </div>
  );
}
