'use client'

import { useEffect, useState } from 'react'
import { useSearchParams, useRouter } from 'next/navigation'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { 
  Table, 
  TableBody, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow 
} from '@/components/ui/table'
import { 
  Search, 
  Loader2, 
  ExternalLink, 
  RefreshCw,
  Users,
  Target,
  Zap,
  TrendingUp,
  Lightbulb,
  AlertCircle,
  CheckCircle2,
  BarChart3,
  Sparkles
} from 'lucide-react'
import type { EnhancedProductAnalysis, Opportunity } from '@/lib/types'

export default function DashboardPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const productName = searchParams.get('product')
  
  const [analysis, setAnalysis] = useState<EnhancedProductAnalysis | null>(null)
  const [opportunities, setOpportunities] = useState<Opportunity[]>([])
  const [loadingOpps, setLoadingOpps] = useState(false)
  const [stats, setStats] = useState<any>(null)

  useEffect(() => {
    const stored = localStorage.getItem('productAnalysis')
    const storedStats = localStorage.getItem('analysisStats')
    if (stored) {
      setAnalysis(JSON.parse(stored))
    }
    if (storedStats) {
      setStats(JSON.parse(storedStats))
    }
  }, [])

  async function findOpportunities() {
    if (!analysis) return
    
    setLoadingOpps(true)
    try {
      const response = await fetch('/api/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ analysis }),
      })

      if (!response.ok) throw new Error('Failed to search')
      
      const data = await response.json()
      setOpportunities(data.data.opportunities)
    } catch (error) {
      console.error('Search error:', error)
    } finally {
      setLoadingOpps(false)
    }
  }

  function getScoreColor(score: number) {
    if (score >= 0.8) return 'bg-green-500/20 text-green-400 border-green-500/30'
    if (score >= 0.6) return 'bg-amber-500/20 text-amber-400 border-amber-500/30'
    return 'bg-red-500/20 text-red-400 border-red-500/30'
  }

  function getIntentIcon(intent: string) {
    switch (intent) {
      case 'frustrated': return <AlertCircle className="h-4 w-4" />
      case 'alternative': return <RefreshCw className="h-4 w-4" />
      case 'comparison': return <BarChart3 className="h-4 w-4" />
      case 'problem-solving': return <Lightbulb className="h-4 w-4" />
      default: return <Search className="h-4 w-4" />
    }
  }

  // Separate keywords by type for prioritization
  const differentiatorKeywords = analysis?.keywords.filter(k => 
    k.type === 'differentiator' || 
    k.term.includes('vs') || 
    k.term.includes('alternative') ||
    k.term.includes('better')
  ) || []
  
  const otherKeywords = analysis?.keywords.filter(k => 
    !differentiatorKeywords.includes(k)
  ) || []
  
  // Sort: single words first, then short phrases
  const sortedKeywords = [...differentiatorKeywords, ...otherKeywords].sort((a, b) => {
    const aWords = a.term.split(/\s+/).length
    const bWords = b.term.split(/\s+/).length
    return aWords - bWords || a.term.length - b.term.length
  })

  if (!analysis) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center space-y-4">
          <h1 className="text-2xl font-bold">Dashboard</h1>
          <p className="text-muted-foreground">No product analyzed yet.</p>
          <Button onClick={() => router.push('/onboarding')}>
            <Search className="mr-2 h-4 w-4" />
            Analyze Product
          </Button>
        </div>
      </div>
    )
  }

  return (
    <div className="p-8">
      {/* Centered container */}
      <div className="max-w-4xl mx-auto space-y-8">
        {/* Header */}
        <div className="flex items-start justify-between">
          <div>
            <h1 className="text-3xl font-bold">{analysis.productName}</h1>
            <p className="text-lg text-muted-foreground mt-1">{analysis.tagline}</p>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => router.push('/onboarding')}>
              <RefreshCw className="mr-2 h-4 w-4" />
              New Analysis
            </Button>
            <Button onClick={findOpportunities} disabled={loadingOpps}>
              {loadingOpps && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              <Search className="mr-2 h-4 w-4" />
              Find Opportunities
            </Button>
          </div>
        </div>

        {/* Stats Cards */}
        {stats && (
          <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
            <Card className="p-4 text-center">
              <Zap className="mx-auto h-5 w-5 text-blue-400 mb-2" />
              <div className="text-2xl font-bold">{stats.features}</div>
              <div className="text-xs text-muted-foreground">Features</div>
            </Card>
            <Card className="p-4 text-center">
              <Target className="mx-auto h-5 w-5 text-purple-400 mb-2" />
              <div className="text-2xl font-bold">{stats.keywords}</div>
              <div className="text-xs text-muted-foreground">Keywords</div>
            </Card>
            <Card className="p-4 text-center">
              <Users className="mx-auto h-5 w-5 text-green-400 mb-2" />
              <div className="text-2xl font-bold">{stats.personas}</div>
              <div className="text-xs text-muted-foreground">Personas</div>
            </Card>
            <Card className="p-4 text-center">
              <Lightbulb className="mx-auto h-5 w-5 text-amber-400 mb-2" />
              <div className="text-2xl font-bold">{stats.useCases}</div>
              <div className="text-xs text-muted-foreground">Use Cases</div>
            </Card>
            <Card className="p-4 text-center">
              <TrendingUp className="mx-auto h-5 w-5 text-red-400 mb-2" />
              <div className="text-2xl font-bold">{stats.competitors}</div>
              <div className="text-xs text-muted-foreground">Competitors</div>
            </Card>
            <Card className="p-4 text-center">
              <Search className="mx-auto h-5 w-5 text-cyan-400 mb-2" />
              <div className="text-2xl font-bold">{stats.dorkQueries}</div>
              <div className="text-xs text-muted-foreground">Queries</div>
            </Card>
          </div>
        )}

        {/* Main Tabs */}
        <Tabs defaultValue="overview" className="space-y-6">
          <TabsList className="grid w-full grid-cols-5">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="features">Features</TabsTrigger>
            <TabsTrigger value="personas">Personas</TabsTrigger>
            <TabsTrigger value="keywords">Keywords</TabsTrigger>
            <TabsTrigger value="opportunities">
              Opportunities {opportunities.length > 0 && `(${opportunities.length})`}
            </TabsTrigger>
          </TabsList>

          {/* Overview Tab */}
          <TabsContent value="overview" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Product Description</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground leading-relaxed">{analysis.description}</p>
              </CardContent>
            </Card>

            <div className="grid md:grid-cols-2 gap-6">
              {/* Problems Solved */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <AlertCircle className="h-5 w-5 text-red-400" />
                    Problems Solved
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {analysis.problemsSolved.slice(0, 5).map((problem, i) => (
                    <div key={i} className="border-l-2 border-red-500/30 pl-4">
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{problem.problem}</span>
                        <Badge variant="outline" className={
                          problem.severity === 'high' ? 'border-red-500/30 text-red-400' :
                          problem.severity === 'medium' ? 'border-amber-500/30 text-amber-400' :
                          'border-green-500/30 text-green-400'
                        }>
                          {problem.severity}
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground mt-1">
                        Feeling: {problem.emotionalImpact}
                      </p>
                    </div>
                  ))}
                </CardContent>
              </Card>

              {/* Competitors */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <TrendingUp className="h-5 w-5 text-cyan-400" />
                    Competitive Landscape
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {analysis.competitors.slice(0, 4).map((comp, i) => (
                    <div key={i} className="border-l-2 border-cyan-500/30 pl-4">
                      <div className="font-medium text-lg">{comp.name}</div>
                      <p className="text-sm text-muted-foreground mt-1">
                        <span className="text-green-400">Your edge:</span> {comp.differentiator}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">
                        Their strength: {comp.theirStrength}
                      </p>
                    </div>
                  ))}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Features Tab */}
          <TabsContent value="features" className="space-y-4">
            {analysis.features.map((feature, i) => (
              <Card key={i}>
                <CardHeader className="pb-3">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Sparkles className="h-4 w-4 text-primary" />
                    {feature.name}
                  </CardTitle>
                  <CardDescription>{feature.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid md:grid-cols-2 gap-4">
                    <div>
                      <h4 className="text-sm font-medium text-muted-foreground mb-2">Benefits</h4>
                      <ul className="space-y-1">
                        {feature.benefits.map((b, j) => (
                          <li key={j} className="text-sm flex items-start gap-2">
                            <CheckCircle2 className="h-4 w-4 text-green-400 mt-0.5 shrink-0" />
                            {b}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div>
                      <h4 className="text-sm font-medium text-muted-foreground mb-2">Use Cases</h4>
                      <ul className="space-y-1">
                        {feature.useCases.map((u, j) => (
                          <li key={j} className="text-sm text-muted-foreground">
                            • {u}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>

          {/* Personas Tab */}
          <TabsContent value="personas" className="space-y-4">
            {analysis.personas.map((persona, i) => (
              <Card key={i}>
                <CardHeader className="pb-3">
                  <div className="flex items-start justify-between">
                    <div>
                      <CardTitle className="flex items-center gap-2">
                        <Users className="h-4 w-4 text-primary" />
                        {persona.name}
                      </CardTitle>
                      <CardDescription>{persona.role} • {persona.companySize}</CardDescription>
                    </div>
                    <Badge variant="outline">{persona.techSavvy} tech</Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <h4 className="text-sm font-medium text-muted-foreground mb-2">Pain Points</h4>
                    <div className="flex flex-wrap gap-2">
                      {persona.painPoints.map((p, j) => (
                        <Badge key={j} variant="secondary" className="bg-red-500/10 text-red-400">
                          {p}
                        </Badge>
                      ))}
                    </div>
                  </div>
                  <div>
                    <h4 className="text-sm font-medium text-muted-foreground mb-2">Goals</h4>
                    <ul className="text-sm space-y-1">
                      {persona.goals.map((g, j) => (
                        <li key={j} className="text-muted-foreground">• {g}</li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="text-sm font-medium text-muted-foreground mb-2">Search Behavior</h4>
                    <div className="space-y-1">
                      {persona.searchBehavior.map((s, j) => (
                        <div key={j} className="text-sm font-mono bg-muted px-2 py-1 rounded">
                          "{s}"
                        </div>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </TabsContent>

          {/* Keywords Tab */}
          <TabsContent value="keywords" className="space-y-6">
            {/* Differentiation Keywords First */}
            {differentiatorKeywords.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Target className="h-5 w-5 text-primary" />
                    Differentiation Keywords
                  </CardTitle>
                  <CardDescription>
                    Keywords that highlight your competitive advantage
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {differentiatorKeywords.map((kw, i) => (
                      <Badge
                        key={i}
                        className="bg-primary/20 text-primary border-primary/30 text-sm px-3 py-1"
                      >
                        {kw.term}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* All Keywords */}
            <Card>
              <CardHeader>
                <CardTitle>All Keywords ({sortedKeywords.length})</CardTitle>
                <CardDescription>
                  Sorted by word count - single words first
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {sortedKeywords.map((kw, i) => (
                    <Badge
                      key={i}
                      variant={kw.type === 'differentiator' ? 'default' : 'outline'}
                      className={kw.type === 'differentiator' ? 'bg-primary/20 text-primary border-primary/30' : ''}
                    >
                      {kw.term}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* Keywords by Type */}
            <div className="grid md:grid-cols-2 gap-4">
              {['product', 'problem', 'solution', 'feature', 'competitor'].map(type => {
                const typeKeywords = analysis.keywords.filter(k => k.type === type)
                if (typeKeywords.length === 0) return null
                return (
                  <Card key={type}>
                    <CardHeader className="pb-3">
                      <CardTitle className="text-sm uppercase tracking-wide">{type}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-wrap gap-2">
                        {typeKeywords.slice(0, 20).map((kw, i) => (
                          <Badge key={i} variant="secondary">
                            {kw.term}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )
              })}
            </div>
          </TabsContent>

          {/* Opportunities Tab */}
          <TabsContent value="opportunities" className="space-y-4">
            {opportunities.length > 0 ? (
              <>
                {opportunities.map((opp) => (
                  <Card key={opp.url} className="hover:border-muted-foreground/50 transition-colors">
                    <CardContent className="pt-6 space-y-4">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1 min-w-0">
                          <h3 className="font-medium line-clamp-2">{opp.title}</h3>
                        </div>
                        <Badge className={getScoreColor(opp.relevanceScore)}>
                          {Math.round(opp.relevanceScore * 100)}%
                        </Badge>
                      </div>

                      <div className="flex items-center gap-2 flex-wrap">
                        <Badge variant="outline">{opp.source}</Badge>
                        <Badge variant="secondary" className="gap-1">
                          {getIntentIcon(opp.intent)}
                          {opp.intent}
                        </Badge>
                        {opp.matchedPersona && (
                          <Badge className="bg-blue-500/20 text-blue-400">
                            {opp.matchedPersona}
                          </Badge>
                        )}
                      </div>

                      <p className="text-sm text-muted-foreground line-clamp-3">
                        {opp.snippet}
                      </p>

                      {opp.matchedKeywords.length > 0 && (
                        <div className="flex flex-wrap gap-2">
                          {opp.matchedKeywords.map((k, i) => (
                            <Badge key={i} className="bg-purple-500/20 text-purple-400 text-xs">
                              {k}
                            </Badge>
                          ))}
                        </div>
                      )}

                      <div className="bg-muted rounded-lg p-3">
                        <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">
                          Suggested Approach
                        </p>
                        <p className="text-sm text-muted-foreground">{opp.suggestedApproach}</p>
                      </div>

                      <a
                        href={opp.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center text-sm text-primary hover:underline"
                      >
                        View Post
                        <ExternalLink className="ml-1 h-3 w-3" />
                      </a>
                    </CardContent>
                  </Card>
                ))}
              </>
            ) : (
              <Card className="bg-muted/50">
                <CardContent className="py-12 text-center">
                  <Search className="mx-auto h-12 w-12 text-muted-foreground/50 mb-4" />
                  <h3 className="text-lg font-medium mb-2">No opportunities yet</h3>
                  <p className="text-muted-foreground mb-4">
                    Click &quot;Find Opportunities&quot; to search for potential customers
                  </p>
                  <Button onClick={findOpportunities} disabled={loadingOpps}>
                    {loadingOpps && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                    <Search className="mr-2 h-4 w-4" />
                    Find Opportunities
                  </Button>
                </CardContent>
              </Card>
            )}
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}