mirror of
https://github.com/yusufipk/RepoHub.git
synced 2026-09-11 10:36:07 +00:00
526 lines
27 KiB
TypeScript
526 lines
27 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect, useMemo } from 'react'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Sparkles, RefreshCw, Settings, Package as PackageIcon, Star, Grid3x3, List, TrendingUp, Award, Info, ChevronDown, ChevronUp } from 'lucide-react'
|
|
import { RecommendedPackage } from '@/types/recommendations'
|
|
import { Package } from '@/types'
|
|
import { useLocale } from '@/contexts/LocaleContext'
|
|
import { useRecommendationProfile } from '@/hooks/useRecommendationProfile'
|
|
import { RECOMMENDATION_PRESETS } from '@/data/recommendationPresets'
|
|
|
|
interface RecommendationsSectionProps {
|
|
onPackageToggle: (pkg: Package) => void
|
|
selectedPackages: Package[]
|
|
onCustomizeClick: () => void
|
|
}
|
|
|
|
type ViewMode = 'grid' | 'compact'
|
|
type SortMode = 'recommended' | 'popularity' | 'preset'
|
|
type FilterCategory = 'all' | string
|
|
|
|
export function RecommendationsSection({
|
|
onPackageToggle,
|
|
selectedPackages,
|
|
onCustomizeClick
|
|
}: RecommendationsSectionProps) {
|
|
const { t } = useLocale()
|
|
const { profile, getEffectiveOS, isProfileComplete } = useRecommendationProfile()
|
|
const [recommendations, setRecommendations] = useState<RecommendedPackage[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [viewMode, setViewMode] = useState<ViewMode>('grid')
|
|
const [sortMode, setSortMode] = useState<SortMode>('recommended')
|
|
const [filterCategory, setFilterCategory] = useState<FilterCategory>('all')
|
|
const [isExpanded, setIsExpanded] = useState(true)
|
|
|
|
const fetchRecommendations = async () => {
|
|
if (!isProfileComplete()) {
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const response = await fetch('/api/recommendations', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
platform_id: getEffectiveOS(),
|
|
categories: profile.categories,
|
|
experienceLevel: profile.experienceLevel,
|
|
limit: 12
|
|
})
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({}))
|
|
|
|
if (response.status === 400) {
|
|
throw new Error(errorData.error || 'Invalid request parameters')
|
|
} else if (response.status === 500) {
|
|
throw new Error('Server error. Please try again later.')
|
|
} else if (response.status === 404) {
|
|
throw new Error('Recommendation service not available')
|
|
} else {
|
|
throw new Error(`Request failed: ${response.statusText}`)
|
|
}
|
|
}
|
|
|
|
const data = await response.json()
|
|
setRecommendations(data.recommendations || [])
|
|
} catch (err) {
|
|
console.error('Error fetching recommendations:', err)
|
|
|
|
// User-friendly error messages
|
|
if (err instanceof TypeError && err.message.includes('fetch')) {
|
|
setError('Network error. Please check your internet connection.')
|
|
} else {
|
|
setError(err instanceof Error ? err.message : 'Failed to load recommendations')
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
// Fetch recommendations on mount and when profile changes
|
|
useEffect(() => {
|
|
if (isProfileComplete()) {
|
|
fetchRecommendations()
|
|
}
|
|
}, [profile.categories, profile.selectedOS, profile.experienceLevel])
|
|
|
|
const isPackageSelected = (pkg: RecommendedPackage) => {
|
|
return selectedPackages.some(selected => selected.id === pkg.id)
|
|
}
|
|
|
|
// Get category icon from presets
|
|
const getCategoryIcon = (category: string): string => {
|
|
const preset = RECOMMENDATION_PRESETS.find(p => p.category === category)
|
|
return preset?.icon || '📦'
|
|
}
|
|
|
|
// Get package count per category
|
|
const getCategoryCount = (category: string): number => {
|
|
return recommendations.filter(pkg => pkg.matchedCategory === category).length
|
|
}
|
|
|
|
// Filter and sort recommendations
|
|
const filteredAndSortedRecommendations = useMemo(() => {
|
|
let result = [...recommendations]
|
|
|
|
// Filter by category
|
|
if (filterCategory !== 'all') {
|
|
result = result.filter(pkg => pkg.matchedCategory === filterCategory)
|
|
}
|
|
|
|
// Sort
|
|
switch (sortMode) {
|
|
case 'popularity':
|
|
result.sort((a, b) => (b.popularity || 0) - (a.popularity || 0))
|
|
break
|
|
case 'preset':
|
|
result.sort((a, b) => {
|
|
if (a.presetMatch && !b.presetMatch) return -1
|
|
if (!a.presetMatch && b.presetMatch) return 1
|
|
return b.recommendationScore - a.recommendationScore
|
|
})
|
|
break
|
|
case 'recommended':
|
|
default:
|
|
result.sort((a, b) => b.recommendationScore - a.recommendationScore)
|
|
break
|
|
}
|
|
|
|
return result
|
|
}, [recommendations, filterCategory, sortMode])
|
|
|
|
if (!isProfileComplete()) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={() => setIsExpanded(!isExpanded)}>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="h-5 w-5 text-primary" />
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<CardTitle className="text-lg">
|
|
{t('recommendations.title')}
|
|
</CardTitle>
|
|
{!isExpanded && recommendations.length > 0 && (
|
|
<span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
|
|
{recommendations.length} {t('recommendations.packages') || 'packages'}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<CardDescription className="text-sm">
|
|
{t('recommendations.subtitle')}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{isExpanded && (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
// Toggle: if all recommendations are selected, deselect them, otherwise select all
|
|
const allSelected = recommendations.every(rec =>
|
|
selectedPackages.some(sel => sel.id === rec.id)
|
|
)
|
|
|
|
if (allSelected) {
|
|
// Deselect all recommendations
|
|
recommendations.forEach(rec => {
|
|
if (isPackageSelected(rec)) {
|
|
onPackageToggle(rec)
|
|
}
|
|
})
|
|
} else {
|
|
// Select all recommendations
|
|
recommendations.forEach(rec => {
|
|
if (!isPackageSelected(rec)) {
|
|
onPackageToggle(rec)
|
|
}
|
|
})
|
|
}
|
|
}}
|
|
disabled={loading || recommendations.length === 0}
|
|
>
|
|
{recommendations.every(rec => selectedPackages.some(sel => sel.id === rec.id))
|
|
? (t('common.deselect_all') || 'Deselect All')
|
|
: (t('common.select_all') || 'Select All')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
fetchRecommendations()
|
|
}}
|
|
disabled={loading}
|
|
>
|
|
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
|
{t('recommendations.refresh')}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onCustomizeClick()
|
|
}}
|
|
>
|
|
<Settings className="h-4 w-4 mr-2" />
|
|
{t('recommendations.customize')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronUp className="h-4 w-4" />
|
|
) : (
|
|
<ChevronDown className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Show user profile info */}
|
|
{isExpanded && (
|
|
<div className="flex flex-wrap gap-2 mt-3">
|
|
<span className="text-xs px-2 py-1 rounded-full bg-primary/10 text-primary">
|
|
{getEffectiveOS()}
|
|
</span>
|
|
{profile.categories.map(cat => (
|
|
<span
|
|
key={cat}
|
|
className="text-xs px-2 py-1 rounded-full bg-secondary text-secondary-foreground"
|
|
>
|
|
{t(`categories.${cat}.name`)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters and View Controls */}
|
|
{isExpanded && !loading && !error && recommendations.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-3 mt-4 pt-4 border-t">
|
|
{/* Category Filter Tabs */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
variant={filterCategory === 'all' ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setFilterCategory('all')}
|
|
className="h-8 text-xs"
|
|
>
|
|
All ({recommendations.length})
|
|
</Button>
|
|
{profile.categories.map(cat => {
|
|
const count = getCategoryCount(cat)
|
|
return (
|
|
<Button
|
|
key={cat}
|
|
variant={filterCategory === cat ? 'default' : 'outline'}
|
|
size="sm"
|
|
onClick={() => setFilterCategory(cat)}
|
|
className="h-8 text-xs"
|
|
disabled={count === 0}
|
|
>
|
|
{getCategoryIcon(cat)} {t(`categories.${cat}.name`)} ({count})
|
|
</Button>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 ml-auto">
|
|
{/* Sort Dropdown */}
|
|
<div className="flex items-center gap-1 border rounded-md">
|
|
<Button
|
|
variant={sortMode === 'recommended' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setSortMode('recommended')}
|
|
className="h-8 text-xs rounded-r-none"
|
|
>
|
|
<Award className="h-3 w-3 mr-1" />
|
|
{t('recommendations.sort.recommended') || 'Best Match'}
|
|
</Button>
|
|
<Button
|
|
variant={sortMode === 'popularity' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setSortMode('popularity')}
|
|
className="h-8 text-xs rounded-none border-x"
|
|
>
|
|
<TrendingUp className="h-3 w-3 mr-1" />
|
|
{t('recommendations.sort.popular') || 'Popular'}
|
|
</Button>
|
|
<Button
|
|
variant={sortMode === 'preset' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setSortMode('preset')}
|
|
className="h-8 text-xs rounded-l-none"
|
|
>
|
|
<Star className="h-3 w-3 mr-1" />
|
|
{t('recommendations.sort.preset') || 'Essential'}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* View Mode Toggle */}
|
|
<div className="flex items-center border rounded-md">
|
|
<Button
|
|
variant={viewMode === 'grid' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setViewMode('grid')}
|
|
className="h-8 w-8 p-0 rounded-r-none"
|
|
>
|
|
<Grid3x3 className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant={viewMode === 'compact' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
onClick={() => setViewMode('compact')}
|
|
className="h-8 w-8 p-0 rounded-l-none border-l"
|
|
>
|
|
<List className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardHeader>
|
|
|
|
{isExpanded && (
|
|
<CardContent>
|
|
{loading && (
|
|
<div className="text-center py-12">
|
|
<RefreshCw className="h-8 w-8 animate-spin mx-auto mb-4 text-primary" />
|
|
<p className="text-muted-foreground">{t('recommendations.loading')}</p>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="text-center py-12">
|
|
<p className="text-destructive mb-4">{error}</p>
|
|
<Button onClick={fetchRecommendations} variant="outline">
|
|
Try Again
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && recommendations.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<PackageIcon className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
|
<p className="text-muted-foreground mb-4">
|
|
{t('recommendations.no_recommendations')}
|
|
</p>
|
|
<Button onClick={onCustomizeClick} variant="outline">
|
|
<Settings className="h-4 w-4 mr-2" />
|
|
{t('recommendations.customize')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && recommendations.length > 0 && viewMode === 'grid' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{filteredAndSortedRecommendations.map(pkg => (
|
|
<Card
|
|
key={pkg.id}
|
|
className={`relative overflow-hidden transition-all hover:shadow-lg cursor-pointer ${isPackageSelected(pkg) ? 'ring-2 ring-primary' : ''
|
|
}`}
|
|
onClick={() => onPackageToggle(pkg)}
|
|
>
|
|
{pkg.presetMatch && (
|
|
<div className="absolute top-2 right-2">
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold bg-primary text-primary-foreground">
|
|
<Star className="h-3 w-3" />
|
|
{t('recommendations.preset_badge')}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<CardContent className="p-4">
|
|
<div className="flex items-start gap-3 mb-3">
|
|
<PackageIcon className="h-8 w-8 text-primary flex-shrink-0" />
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold truncate">{pkg.name}</h3>
|
|
<p className="text-xs text-muted-foreground">{pkg.version}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-sm text-muted-foreground line-clamp-2 mb-3">
|
|
{pkg.description}
|
|
</p>
|
|
|
|
{/* Recommendation score and reason */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-muted-foreground">
|
|
{t('recommendations.score')}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
<div className="h-2 w-16 bg-secondary rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary rounded-full transition-all"
|
|
style={{ width: `${pkg.recommendationScore}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-xs font-semibold">{pkg.recommendationScore}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{pkg.recommendationReason && (
|
|
<div className="pt-2 border-t">
|
|
<p className="text-xs text-muted-foreground">
|
|
<span className="font-semibold">{t('recommendations.reason')}</span>
|
|
{' '}
|
|
{pkg.recommendationReason}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
variant={isPackageSelected(pkg) ? 'default' : 'outline'}
|
|
size="sm"
|
|
className="w-full mt-3"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onPackageToggle(pkg)
|
|
}}
|
|
>
|
|
{isPackageSelected(pkg) ? '✓ Selected' : t('recommendations.add_to_selection')}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Compact View Mode */}
|
|
{!loading && !error && recommendations.length > 0 && viewMode === 'compact' && (
|
|
<div className="space-y-2">
|
|
{filteredAndSortedRecommendations.map(pkg => (
|
|
<div
|
|
key={pkg.id}
|
|
className={`flex items-center gap-3 p-3 rounded-lg border-2 transition-all cursor-pointer hover:shadow-md ${isPackageSelected(pkg)
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border hover:border-primary/50'
|
|
}`}
|
|
onClick={() => onPackageToggle(pkg)}
|
|
>
|
|
{/* Package Icon */}
|
|
<PackageIcon className="h-6 w-6 text-primary flex-shrink-0" />
|
|
|
|
{/* Package Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="font-semibold text-sm truncate">{pkg.name}</h4>
|
|
{pkg.presetMatch && (
|
|
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-semibold bg-primary text-primary-foreground">
|
|
<Star className="h-2.5 w-2.5" />
|
|
Essential
|
|
</span>
|
|
)}
|
|
<span className="text-xs text-muted-foreground">{pkg.version}</span>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground truncate">{pkg.description}</p>
|
|
</div>
|
|
|
|
{/* Score Badge */}
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<div className="text-right">
|
|
<div className="text-xs font-semibold text-primary">
|
|
{pkg.recommendationScore}%
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
match
|
|
</div>
|
|
</div>
|
|
|
|
{/* Info Tooltip */}
|
|
{pkg.recommendationReason && (
|
|
<div className="relative group">
|
|
<Info className="h-4 w-4 text-muted-foreground cursor-help" />
|
|
<div className="absolute right-0 top-full mt-2 w-64 p-2 bg-popover text-popover-foreground text-xs rounded-md shadow-lg border opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
|
|
<p className="font-semibold mb-1">Why recommended?</p>
|
|
<p>{pkg.recommendationReason}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Select Button */}
|
|
<Button
|
|
variant={isPackageSelected(pkg) ? 'default' : 'outline'}
|
|
size="sm"
|
|
className="ml-2"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onPackageToggle(pkg)
|
|
}}
|
|
>
|
|
{isPackageSelected(pkg) ? '✓' : '+'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
)
|
|
}
|