import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { DollarSign } from "lucide-react";
import surveyBanner from "@/assets/survey-banner.jpg";
import { useCountdown } from "@/hooks/useCountdown";
import { HeroBanner } from "@/components/HeroBanner";
import { ServicesSection } from "@/components/ServicesSection";
import { FundingCategoryGrid } from "@/components/FundingCategoryGrid";
import { SurveyModal } from "@/components/SurveyModal";
import { MobileContentCard } from "@/components/MobileContentCard";
import { MobileLoadingState } from "@/components/MobileLoadingState";
import { useIsMobile } from "@/hooks/use-mobile";
import { useToast } from "@/hooks/use-toast";
import type { FundingCategory } from "@/data/fundingCategories";

const Index = () => {
  const timeLeft = useCountdown('2024-08-26T23:59:59');
  const [showSignedUpVersion, setShowSignedUpVersion] = useState(false);
  const [isSurveyModalOpen, setIsSurveyModalOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const isMobile = useIsMobile();
  const { toast } = useToast();

  const handleCategoryClick = (category: FundingCategory) => {
    console.log('Category clicked:', category.name);
    toast({
      title: "Category Selected",
      description: `Browsing ${category.name} opportunities`,
    });
  };

  const handleSurveyClick = () => {
    setIsSurveyModalOpen(true);
  };

  const handleFavoriteToggle = (title: string) => {
    toast({
      title: "Added to Favorites",
      description: `${title} has been saved to your favorites`,
    });
  };

  // Sample funding opportunities for mobile cards
  const sampleOpportunities = [
    {
      title: "Small Business Innovation Research Grant",
      category: "Business",
      amount: "$150,000 - $1.5M",
      deadline: "March 15, 2024",
      description: "Federal funding for small businesses engaged in research and development with potential for commercialization."
    },
    {
      title: "Community Development Block Grant",
      category: "Community",
      amount: "$50,000 - $500,000",
      deadline: "April 30, 2024",
      description: "Support for community development activities that benefit low and moderate-income persons."
    },
    {
      title: "Education Innovation Grant",
      category: "Education",
      amount: "$25,000 - $250,000",
      deadline: "May 20, 2024",
      description: "Funding for innovative educational programs and initiatives that improve student outcomes."
    }
  ];

  if (isMobile) {
    return (
      <div className="space-y-6 animate-fade-in">
        {/* Version Toggle for Demo - Mobile */}
        <div className="text-center">
          <Button 
            onClick={() => setShowSignedUpVersion(!showSignedUpVersion)}
            variant="outline"
            className="mb-4 w-full active:scale-95 transition-all duration-200"
            aria-label={`Switch to ${showSignedUpVersion ? 'pre-signup' : 'post-signup'} version`}
          >
            {showSignedUpVersion ? "Show Pre-Signup Version" : "Show Post-Signup Version"}
          </Button>
        </div>

        {/* Hero Section - Mobile Optimized */}
        <section className="space-y-4">
          <HeroBanner 
            timeLeft={timeLeft} 
            showSignedUpVersion={showSignedUpVersion} 
          />
        </section>

        {/* Services Section - Mobile Optimized */}
        <ServicesSection />

        {/* Funding Categories - Mobile Optimized */}
        <FundingCategoryGrid onCategoryClick={handleCategoryClick} />

        {/* Survey Banner - Mobile Optimized */}
        <div className="mt-6">
          <div 
            className="cursor-pointer group active:scale-[0.98] transition-all duration-200"
            onClick={handleSurveyClick}
            role="button"
            tabIndex={0}
            aria-label="Rate our service - Your feedback matters"
          >
            <img 
              src={surveyBanner} 
              alt="Rate Our Service - Your Feedback Matters"
              className="w-full h-auto rounded-xl shadow-sm border border-gray-200 group-active:shadow-md transition-all duration-200"
            />
          </div>
        </div>

        {/* Survey Modal */}
        <SurveyModal 
          isOpen={isSurveyModalOpen}
          onClose={() => setIsSurveyModalOpen(false)}
        />
      </div>
    );
  }

  return (
    <div className="space-y-12">
      <div className="container mx-auto px-4 py-8 space-y-12">
        {/* Version Toggle for Demo */}
        <div className="text-center">
          <Button 
            onClick={() => setShowSignedUpVersion(!showSignedUpVersion)}
            variant="outline"
            className="mb-4"
            aria-label={`Switch to ${showSignedUpVersion ? 'pre-signup' : 'post-signup'} version`}
          >
            {showSignedUpVersion ? "Show Pre-Signup Version" : "Show Post-Signup Version"}
          </Button>
        </div>

        {/* Hero Section */}
        <section className="text-center space-y-6 px-2 sm:px-0">
          <HeroBanner 
            timeLeft={timeLeft} 
            showSignedUpVersion={showSignedUpVersion} 
          />
        </section>

        <Separator className="my-12" />

        {/* Services Section */}
        <ServicesSection />

        <Separator className="my-12" />

        {/* Funding Categories */}
        <FundingCategoryGrid onCategoryClick={handleCategoryClick} />

        <Separator className="my-12" />

        {/* Survey Banner */}
        <section className="space-y-8">
          <div className="max-w-2xl mx-auto">
            <div 
              className="cursor-pointer group hover:scale-[1.03] transition-all duration-300 min-h-[44px]"
              onClick={handleSurveyClick}
              role="button"
              tabIndex={0}
              aria-label="Rate our service - Your feedback matters"
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  handleSurveyClick();
                }
              }}
            >
              <img 
                src={surveyBanner} 
                alt="Rate Our Service - Your Feedback Matters"
                className="w-full h-auto rounded-xl shadow-lg border border-border group-hover:shadow-2xl group-hover:border-primary/30 transition-all duration-300"
              />
            </div>
          </div>
        </section>
      </div>

      {/* Survey Modal */}
      <SurveyModal 
        isOpen={isSurveyModalOpen}
        onClose={() => setIsSurveyModalOpen(false)}
      />
    </div>
  );
};

export default Index;