import { useNavigate, useParams, useLocation } from "react-router-dom";
import { useState, useCallback } from "react";
import { useMagicBag } from "../context/MagicBagContext";
import { RewardModal } from "./RewardModal";
import { getTopicConfig } from "../../config/topicConfig";
import { usePageTracking } from "../../hooks/usePageTracking";
import { FeedHeader } from "./feed/FeedHeader";
import { useInbox } from "../context/InboxContext";
import { AppBackground } from "./shared/AppBackground";
import { backgroundImages } from "../../config/backgroundConfig";
import { BottomNav } from "./BottomNav";

export function SubmitChallengePage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { topicId = "1" } = useParams<{ topicId: string }>();
  const topicConfig = getTopicConfig(topicId);

  usePageTracking(`ثبت ماموریت ${topicConfig.title}`);
  const { addNewItem } = useMagicBag();
  const { refreshInbox } = useInbox();
  const [showRewardModal, setShowRewardModal] = useState(false);

  // دریافت doingMission از location state
  const doingMission = (location.state as any)?.doingMission;

  const handleBack = useCallback(() => {
    navigate(-1);
  }, [navigate]);

  const handleSubmit = (data: any) => {
    console.log("Submitting challenge:", data);
    // Show reward modal
    setShowRewardModal(true);
    // Add badge to magic bag
    addNewItem();
    // Refresh inbox to load new messages
    refreshInbox();
  };

  const handleCloseModal = () => {
    setShowRewardModal(false);
    // Navigate to feed after closing modal
    navigate(`/feed/${topicId}`);
  };

  // Dynamically render the form component from config
  const FormComponent = topicConfig.formComponent;

  return (
    <div className="min-h-screen w-full relative overflow-hidden">
      <AppBackground position="fixed" zIndex={0} imageUrl={backgroundImages.submitChallenge} />

      {/* Content */}
      <div className="relative z-10 max-w-md mx-auto">
        {/* Header */}
        <FeedHeader topicTitle={`ثبت چالش ${topicConfig.title}`} onBack={handleBack} />

        {/* Main Content - Scrollable */}
        <div
          className="fixed top-0 left-0 right-0 bottom-0 max-w-md mx-auto overflow-hidden"
          style={{ paddingTop: "110px", zIndex: 1 }}
        >
          <div
            className="h-full overflow-y-auto relative px-[24px] pt-[48px] pb-[132px]"
            style={{
              scrollbarWidth: "none",
              msOverflowStyle: "none",
              maskImage: "linear-gradient(to bottom, transparent 0%, black 60px)",
              WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 60px)",
            }}
          >
            {/* Dynamic Form Component */}
            <FormComponent
              topicId={topicId}
              topicTitle={topicConfig.title}
              onSubmit={handleSubmit}
              doingMission={doingMission}
            />
          </div>

        </div>
      </div>

      <style>{`
        .h-full.overflow-y-auto::-webkit-scrollbar { display: none; }
      `}</style>

      <BottomNav />

      {/* Reward Modal */}
      <RewardModal
        isOpen={showRewardModal}
        onClose={handleCloseModal}
        topicTitle={topicConfig.title}
      />
    </div>
  );
}
