439 lines
17 KiB
TypeScript
439 lines
17 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Checkbox } from '@/components/ui/checkbox'
|
|
import { Slider } from '@/components/ui/slider'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter
|
|
} from '@/components/ui/dialog'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow
|
|
} from '@/components/ui/table'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Label } from '@/components/ui/label'
|
|
import {
|
|
Search,
|
|
Loader2,
|
|
ExternalLink,
|
|
MessageSquare,
|
|
Twitter,
|
|
Users,
|
|
HelpCircle,
|
|
Filter,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
Target,
|
|
Zap,
|
|
AlertCircle,
|
|
BarChart3,
|
|
CheckCircle2,
|
|
Eye,
|
|
Copy
|
|
} from 'lucide-react'
|
|
import type {
|
|
EnhancedProductAnalysis,
|
|
Opportunity,
|
|
PlatformConfig,
|
|
SearchStrategy
|
|
} from '@/lib/types'
|
|
|
|
const STRATEGY_INFO: Record<SearchStrategy, { name: string; description: string }> = {
|
|
'direct-keywords': { name: 'Direct Keywords', description: 'People looking for your product category' },
|
|
'problem-pain': { name: 'Problem/Pain', description: 'People experiencing problems you solve' },
|
|
'competitor-alternative': { name: 'Competitor Alternatives', description: 'People switching from competitors' },
|
|
'how-to': { name: 'How-To/Tutorials', description: 'People learning about solutions' },
|
|
'emotional-frustrated': { name: 'Frustration Posts', description: 'Emotional posts about pain points' },
|
|
'comparison': { name: 'Comparisons', description: '"X vs Y" comparison posts' },
|
|
'recommendation': { name: 'Recommendations', description: '"What do you use" requests' }
|
|
}
|
|
|
|
export default function OpportunitiesPage() {
|
|
const router = useRouter()
|
|
const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
|
|
const [platforms, setPlatforms] = useState<PlatformConfig[]>([])
|
|
const [strategies, setStrategies] = useState<SearchStrategy[]>([
|
|
'direct-keywords',
|
|
'problem-pain',
|
|
'competitor-alternative'
|
|
])
|
|
const [intensity, setIntensity] = useState<'broad' | 'balanced' | 'targeted'>('balanced')
|
|
const [isSearching, setIsSearching] = useState(false)
|
|
const [opportunities, setOpportunities] = useState<Opportunity[]>([])
|
|
const [generatedQueries, setGeneratedQueries] = useState<any[]>([])
|
|
const [showQueries, setShowQueries] = useState(false)
|
|
const [selectedOpportunity, setSelectedOpportunity] = useState<Opportunity | null>(null)
|
|
const [replyText, setReplyText] = useState('')
|
|
const [stats, setStats] = useState<any>(null)
|
|
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('productAnalysis')
|
|
if (stored) {
|
|
setAnalysis(JSON.parse(stored))
|
|
} else {
|
|
router.push('/onboarding')
|
|
}
|
|
|
|
fetch('/api/opportunities')
|
|
.then(r => {
|
|
if (r.redirected) {
|
|
router.push('/auth?next=/opportunities')
|
|
return null
|
|
}
|
|
return r.json()
|
|
})
|
|
.then(data => {
|
|
if (data) {
|
|
setPlatforms(data.platforms)
|
|
}
|
|
})
|
|
}, [router])
|
|
|
|
const togglePlatform = (platformId: string) => {
|
|
setPlatforms(prev => prev.map(p =>
|
|
p.id === platformId ? { ...p, enabled: !p.enabled } : p
|
|
))
|
|
}
|
|
|
|
const toggleStrategy = (strategy: SearchStrategy) => {
|
|
setStrategies(prev =>
|
|
prev.includes(strategy)
|
|
? prev.filter(s => s !== strategy)
|
|
: [...prev, strategy]
|
|
)
|
|
}
|
|
|
|
const executeSearch = async () => {
|
|
if (!analysis) return
|
|
|
|
setIsSearching(true)
|
|
setOpportunities([])
|
|
|
|
try {
|
|
const config = {
|
|
platforms,
|
|
strategies,
|
|
intensity,
|
|
maxResults: intensity === 'broad' ? 80 : intensity === 'balanced' ? 50 : 30
|
|
}
|
|
|
|
const response = await fetch('/api/opportunities', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ analysis, config })
|
|
})
|
|
|
|
if (response.redirected) {
|
|
router.push('/auth?next=/opportunities')
|
|
return
|
|
}
|
|
|
|
const data = await response.json()
|
|
|
|
if (data.success) {
|
|
setOpportunities(data.data.opportunities)
|
|
setGeneratedQueries(data.data.queries)
|
|
setStats(data.data.stats)
|
|
}
|
|
} catch (error) {
|
|
console.error('Search error:', error)
|
|
} finally {
|
|
setIsSearching(false)
|
|
}
|
|
}
|
|
|
|
const generateReply = (opp: Opportunity) => {
|
|
const template = opp.softPitch
|
|
? `Hey, I saw your post about ${opp.matchedProblems[0] || 'your challenge'}. We faced something similar and ended up building ${analysis?.productName} specifically for this. Happy to share what worked for us.`
|
|
: `Hi! I noticed you're looking for solutions to ${opp.matchedProblems[0]}. I work on ${analysis?.productName} that helps teams with this - specifically ${opp.matchedKeywords.slice(0, 2).join(' and ')}. Would love to show you how it works.`
|
|
setReplyText(template)
|
|
}
|
|
|
|
const getIntentIcon = (intent: string) => {
|
|
switch (intent) {
|
|
case 'frustrated': return <AlertCircle className="h-4 w-4 text-red-400" />
|
|
case 'comparing': return <BarChart3 className="h-4 w-4 text-amber-400" />
|
|
case 'learning': return <Users className="h-4 w-4 text-blue-400" />
|
|
default: return <Target className="h-4 w-4 text-muted-foreground" />
|
|
}
|
|
}
|
|
|
|
if (!analysis) return null
|
|
|
|
return (
|
|
<div className="flex h-screen">
|
|
{/* Sidebar */}
|
|
<div className="w-80 border-r border-border bg-card flex flex-col">
|
|
<div className="p-4 border-b border-border">
|
|
<h2 className="font-semibold flex items-center gap-2">
|
|
<Target className="h-5 w-5" />
|
|
Search Configuration
|
|
</h2>
|
|
</div>
|
|
|
|
<ScrollArea className="flex-1 p-4 space-y-6">
|
|
{/* Platforms */}
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium uppercase text-muted-foreground">Platforms</Label>
|
|
<div className="space-y-2">
|
|
{platforms.map(platform => (
|
|
<div key={platform.id} className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id={platform.id}
|
|
checked={platform.enabled}
|
|
onCheckedChange={() => togglePlatform(platform.id)}
|
|
/>
|
|
<Label htmlFor={platform.id} className="cursor-pointer flex-1">{platform.name}</Label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Strategies */}
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium uppercase text-muted-foreground">Strategies</Label>
|
|
<div className="space-y-2">
|
|
{(Object.keys(STRATEGY_INFO) as SearchStrategy[]).map(strategy => (
|
|
<div key={strategy} className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id={strategy}
|
|
checked={strategies.includes(strategy)}
|
|
onCheckedChange={() => toggleStrategy(strategy)}
|
|
/>
|
|
<div className="flex-1">
|
|
<Label htmlFor={strategy} className="cursor-pointer">
|
|
{STRATEGY_INFO[strategy].name}
|
|
</Label>
|
|
<p className="text-xs text-muted-foreground">{STRATEGY_INFO[strategy].description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Intensity */}
|
|
<div className="space-y-3">
|
|
<Label className="text-sm font-medium uppercase text-muted-foreground">Intensity</Label>
|
|
<Slider
|
|
value={[intensity === 'broad' ? 0 : intensity === 'balanced' ? 50 : 100]}
|
|
onValueChange={([v]) => setIntensity(v < 33 ? 'broad' : v < 66 ? 'balanced' : 'targeted')}
|
|
max={100}
|
|
step={50}
|
|
/>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>Broad</span>
|
|
<span>Targeted</span>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<div className="p-4 border-t border-border">
|
|
<Button
|
|
onClick={executeSearch}
|
|
disabled={isSearching || platforms.filter(p => p.enabled).length === 0}
|
|
className="w-full"
|
|
>
|
|
{isSearching ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Searching...</> : <><Search className="mr-2 h-4 w-4" /> Find Opportunities</>}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 overflow-auto p-6">
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Opportunity Finder</h1>
|
|
<p className="text-muted-foreground">Discover potential customers for {analysis.productName}</p>
|
|
</div>
|
|
{stats && (
|
|
<div className="flex gap-4 text-sm">
|
|
<div className="text-center">
|
|
<div className="font-semibold">{stats.opportunitiesFound}</div>
|
|
<div className="text-muted-foreground">Found</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="font-semibold text-green-400">{stats.highRelevance}</div>
|
|
<div className="text-muted-foreground">High Quality</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Generated Queries */}
|
|
{generatedQueries.length > 0 && (
|
|
<Collapsible open={showQueries} onOpenChange={setShowQueries}>
|
|
<Card>
|
|
<CollapsibleTrigger asChild>
|
|
<CardHeader className="cursor-pointer">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm">Generated Queries ({generatedQueries.length})</CardTitle>
|
|
{showQueries ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
|
</div>
|
|
</CardHeader>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<CardContent>
|
|
<div className="space-y-1 max-h-48 overflow-auto text-xs font-mono">
|
|
{generatedQueries.slice(0, 20).map((q, i) => (
|
|
<div key={i} className="bg-muted px-2 py-1 rounded">{q.query}</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</CollapsibleContent>
|
|
</Card>
|
|
</Collapsible>
|
|
)}
|
|
|
|
{/* Results Table */}
|
|
{opportunities.length > 0 ? (
|
|
<Card>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Platform</TableHead>
|
|
<TableHead>Intent</TableHead>
|
|
<TableHead>Score</TableHead>
|
|
<TableHead className="w-1/2">Post</TableHead>
|
|
<TableHead>Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{opportunities.slice(0, 50).map((opp) => (
|
|
<TableRow key={opp.id}>
|
|
<TableCell><Badge variant="outline">{opp.platform}</Badge></TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
{getIntentIcon(opp.intent)}
|
|
<span className="capitalize text-sm">{opp.intent}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={opp.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : opp.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
|
|
{Math.round(opp.relevanceScore * 100)}%
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell>
|
|
<p className="font-medium line-clamp-1">{opp.title}</p>
|
|
<p className="text-sm text-muted-foreground line-clamp-2">{opp.snippet}</p>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1">
|
|
<Button variant="ghost" size="sm" onClick={() => setSelectedOpportunity(opp)}>
|
|
<Eye className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => window.open(opp.url, '_blank')}>
|
|
<ExternalLink className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Card>
|
|
) : isSearching ? (
|
|
<Card className="p-12 text-center">
|
|
<Loader2 className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4 animate-spin" />
|
|
<h3 className="text-lg font-medium">Searching...</h3>
|
|
<p className="text-muted-foreground">Scanning platforms for opportunities</p>
|
|
</Card>
|
|
) : (
|
|
<Card className="p-12 text-center">
|
|
<Search className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
|
|
<h3 className="text-lg font-medium">Ready to Search</h3>
|
|
<p className="text-muted-foreground">Select platforms and strategies, then click Find Opportunities</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detail Dialog */}
|
|
<Dialog open={!!selectedOpportunity} onOpenChange={() => setSelectedOpportunity(null)}>
|
|
<DialogContent className="max-w-2xl">
|
|
{selectedOpportunity && (
|
|
<>
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Badge className={selectedOpportunity.relevanceScore >= 0.8 ? 'bg-green-500/20 text-green-400' : selectedOpportunity.relevanceScore >= 0.6 ? 'bg-amber-500/20 text-amber-400' : 'bg-red-500/20 text-red-400'}>
|
|
{Math.round(selectedOpportunity.relevanceScore * 100)}% Match
|
|
</Badge>
|
|
<Badge variant="outline">{selectedOpportunity.platform}</Badge>
|
|
<Badge variant="secondary" className="capitalize">{selectedOpportunity.intent}</Badge>
|
|
</div>
|
|
<DialogTitle className="text-lg pt-2">{selectedOpportunity.title}</DialogTitle>
|
|
<DialogDescription>{selectedOpportunity.snippet}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{selectedOpportunity.matchedKeywords.length > 0 && (
|
|
<div>
|
|
<Label className="text-sm text-muted-foreground">Matched Keywords</Label>
|
|
<div className="flex flex-wrap gap-2 mt-1">
|
|
{selectedOpportunity.matchedKeywords.map((kw, i) => (
|
|
<Badge key={i} variant="secondary">{kw}</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-muted p-4 rounded-lg">
|
|
<Label className="text-sm text-muted-foreground">Suggested Approach</Label>
|
|
<p className="text-sm mt-1">{selectedOpportunity.suggestedApproach}</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label>Generated Reply</Label>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => generateReply(selectedOpportunity)}>
|
|
<Zap className="h-3 w-3 mr-1" /> Generate
|
|
</Button>
|
|
{replyText && (
|
|
<Button variant="ghost" size="sm" onClick={() => navigator.clipboard.writeText(replyText)}>
|
|
<Copy className="h-3 w-3 mr-1" /> Copy
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Textarea value={replyText} onChange={(e) => setReplyText(e.target.value)} placeholder="Click Generate to create a reply..." rows={4} />
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => window.open(selectedOpportunity.url, '_blank')}>
|
|
<ExternalLink className="h-4 w-4 mr-2" /> View Post
|
|
</Button>
|
|
<Button onClick={() => setSelectedOpportunity(null)}>
|
|
<CheckCircle2 className="h-4 w-4 mr-2" /> Mark as Viewed
|
|
</Button>
|
|
</DialogFooter>
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|