import { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { AppHeader } from "@/components/AppHeader";
import { DiscoveryHeader } from "@/components/DiscoveryHeader";
import { ProgrammingIdeaCard } from "@/components/ProgrammingIdeaCard";
import { VendorCard } from "@/components/VendorCard";
import { Footer } from "@/components/Footer";
import { WelcomeModal } from "@/components/WelcomeModal";
import { QuickFilters } from "@/components/QuickFilters";
import { QuickWinsDialog } from "@/components/QuickWinsDialog";
import { FirstTimeTooltip } from "@/components/FirstTimeTooltips";
import { useAutoCreateList } from "@/hooks/useAutoCreateList";
import { useToast } from "@/hooks/use-toast";
import { useAuth } from "@/components/AuthProvider";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Heart, HelpCircle, Sparkles } from "lucide-react";
import { fetchIdeas, fetchVendors, type Idea, type Vendor } from "@/lib/api";
import { AnimatedBackground } from "@/components/AnimatedBackground";
import { SkeletonCard } from "@/components/ui/skeleton-card";
import { motion } from "framer-motion";
const Index = () => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { toast } = useToast();
const { user } = useAuth();
// API data state
const [ideas, setIdeas] = useState
([]);
const [vendors, setVendors] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// UI state
const [searchQuery, setSearchQuery] = useState("");
const [activeTab, setActiveTab] = useState<"all" | "ideas" | "vendors">("all");
const [viewMode] = useState<"grid">("grid"); // Always grid view
// New filtering system - Initialize from URL params
const [communityFilters, setCommunityFilters] = useState([]);
const [industryFilter, setIndustryFilter] = useState("all");
const [goalsFilter, setGoalsFilter] = useState([]);
const [savedItems, setSavedItems] = useState([]);
const [sortBy, setSortBy] = useState<"dateAsc" | "dateDesc" | "recentlyAdded" | "mostFavorited">("recentlyAdded");
// New states for improved UX
const [showWelcomeModal, setShowWelcomeModal] = useState(false);
const [quickWinsOpen, setQuickWinsOpen] = useState(false);
const [quickFilterCommunity, setQuickFilterCommunity] = useState("all");
const [quickFilterEvent, setQuickFilterEvent] = useState("all");
const [quickFilterBudget, setQuickFilterBudget] = useState("all");
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
// Auto-create first list for new users
useAutoCreateList();
// Initialize filters from URL params and check if first-time visitor
useEffect(() => {
const communityParam = searchParams.get('community');
if (communityParam) {
setCommunityFilters([communityParam]);
}
// Check if first-time visitor
const hasVisited = localStorage.getItem("hasVisitedBefore");
if (!hasVisited) {
setShowWelcomeModal(true);
localStorage.setItem("hasVisitedBefore", "true");
// Show Quick Wins dialog after a short delay
setTimeout(() => {
setQuickWinsOpen(true);
}, 1000);
}
// Check if Quick Wins has been shown before (for returning users)
const hasSeenQuickWins = localStorage.getItem("hasSeenQuickWins");
if (!hasSeenQuickWins && hasVisited) {
setTimeout(() => {
setQuickWinsOpen(true);
localStorage.setItem("hasSeenQuickWins", "true");
}, 500);
}
}, [searchParams]);
// Fetch data from API
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
// Build API parameters based on current filters
const ideasParams = {
page: 1,
pageSize: 50,
...(goalsFilter.length > 0 && { goals: goalsFilter }),
...(industryFilter !== "all" && { industry: industryFilter }),
...(communityFilters.length > 0 && { communityFocus: communityFilters })
};
const vendorsParams = {
page: 1,
pageSize: 50,
...(industryFilter !== "all" && { industry: industryFilter }),
...(communityFilters.length > 0 && { communityFocus: communityFilters })
};
const [ideasResponse, vendorsResponse] = await Promise.all([
fetchIdeas(ideasParams),
fetchVendors(vendorsParams)
]);
setIdeas(ideasResponse.data);
setVendors(vendorsResponse.data);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to fetch data');
console.error('Error fetching data:', err);
} finally {
setLoading(false);
}
};
fetchData();
}, [communityFilters, industryFilter, goalsFilter]); // Refetch when filters change
const handleSaveItem = (id: string) => {
// Check if user is authenticated
if (!user) {
toast({
title: "Sign in required",
description: (
Please sign in to save items to your favorites.
),
duration: 5000,
});
return;
}
const isCurrentlySaved = savedItems.includes(id);
setSavedItems(prev =>
isCurrentlySaved ? prev.filter(item => item !== id) : [...prev, id]
);
if (!isCurrentlySaved) {
toast({
title: "Saved to your list",
description: (
This item has been added to your favorites.
),
duration: 4000,
});
} else {
toast({
title: "Removed from list",
description: "This item has been removed from your favorites.",
duration: 3000,
});
}
};
const handleViewMore = (id: string, type?: string) => {
if (type === "vendor" || vendors.find(v => v.id === id)) {
navigate(`/vendor/${id}`);
} else {
navigate(`/idea/${id}`);
}
};
// Client-side filtering for search query only (since other filters are handled by API)
const filteredIdeas = ideas.filter(idea => {
const matchesSearch = searchQuery === "" ||
idea.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
idea.description.toLowerCase().includes(searchQuery.toLowerCase());
return matchesSearch;
});
const filteredVendors = vendors.filter(vendor => {
const matchesSearch = searchQuery === "" ||
vendor.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
vendor.bio.toLowerCase().includes(searchQuery.toLowerCase());
return matchesSearch;
});
const sortItems = (items: any[]) => {
switch (sortBy) {
case "dateAsc":
return [...items].sort((a, b) => new Date(a.eventDate || a.dateAdded).getTime() - new Date(b.eventDate || b.dateAdded).getTime());
case "dateDesc":
return [...items].sort((a, b) => new Date(b.eventDate || b.dateAdded).getTime() - new Date(a.eventDate || a.dateAdded).getTime());
case "recentlyAdded":
return [...items].sort((a, b) => new Date(b.dateAdded).getTime() - new Date(a.dateAdded).getTime());
case "mostFavorited":
return [...items].sort((a, b) => b.favoriteCount - a.favoriteCount);
default:
return items;
}
};
const getDisplayItems = () => {
let displayIdeas = [];
let displayVendors = [];
switch (activeTab) {
case "ideas":
displayIdeas = sortItems(filteredIdeas);
break;
case "vendors":
displayVendors = sortItems(filteredVendors);
break;
default:
displayIdeas = sortItems(filteredIdeas);
displayVendors = sortItems(filteredVendors);
}
return { ideas: displayIdeas, vendors: displayVendors };
};
const { ideas: displayIdeas, vendors: displayVendors } = getDisplayItems();
const handleWelcomeGetStarted = (type?: string) => {
setShowWelcomeModal(false);
if (type === "ideas") {
// Show all programming ideas
setActiveTab("ideas");
} else if (type === "vendors") {
// Show vendors
setActiveTab("vendors");
} else if (type === "activities") {
setQuickFilterEvent("social");
}
};
return (
setShowWelcomeModal(false)}
onGetStarted={handleWelcomeGetStarted}
/>
setQuickWinsOpen(false)}
onUpgrade={() => {
// Handle upgrade to Pro logic here
toast({
title: "Pro Features Coming Soon",
description: "Advanced filtering and 100+ formats will be available soon!",
});
}}
/>
{/* Filters */}
{/* Quick Wins Button - Right above search bar */}
{/* Quick Filters */}
setShowAdvancedFilters(!showAdvancedFilters)}
/>
{/* Help button for new users */}
{error && (
Error: {error}
)}
{loading ? (
{[...Array(14)].map((_, i) => (
))}
) : (
<>
{activeTab === "ideas" ? "Programming Ideas" : activeTab === "vendors" ? "Vendors" : "Discover"}
Sort by:
{displayIdeas.map((idea, index) => (
))}
{displayVendors.map((vendor, index) => (
{}} // Removed contact functionality
isSaved={savedItems.includes(vendor.id)}
/>
))}
{displayIdeas.length === 0 && displayVendors.length === 0 && !loading && (
No results found. Try adjusting your search or filters.
)}
)}