'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 => r.json())
      .then(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 })
      })

      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>
  )
}