import React from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
import { Badge } from "../ui/badge"
import { Button } from "../ui/button"
import { Progress } from "../ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
import {
  Star,
  GitFork,
  Eye,
  Users,
  ExternalLink,
  Github,
  TrendingUp,
  BarChart3,
  Activity,
  Code2,
  Calendar,
  Package,
  Download,
} from "lucide-react"
import { GitHubRepository, GitHubStats, LanguageStats } from "./types"
import { formatNumber, formatDate, LANGUAGE_COLORS } from "./github-api"
import { cn } from "../../lib/utils"

interface BaseVariantProps {
  repos: GitHubRepository[]
  stats: GitHubStats | null
  loading?: boolean
  className?: string
  onRepositoryClick?: (repo: GitHubRepository) => void
}

// Minimal variant - Single line with key stats
export const MinimalVariant: React.FC<BaseVariantProps> = ({ repos, stats, className }) => {
  if (!stats) return null

  return (
    <div className={cn("flex items-center gap-4 text-sm", className)}>
      <button
        className="flex items-center gap-2 hover:text-primary transition-colors"
        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}`, '_blank')}
      >
        <Github className="h-4 w-4" />
        <span className="font-medium">{repos.length} repositories</span>
      </button>
      <button
        className="flex items-center gap-2 hover:text-yellow-600 transition-colors"
        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=stargazers`, '_blank')}
      >
        <Star className="h-4 w-4 text-yellow-500" />
        <span>{formatNumber(stats.totalStars)} stars</span>
      </button>
      <button
        className="flex items-center gap-2 hover:text-blue-600 transition-colors"
        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=fork&language=&sort=`, '_blank')}
      >
        <GitFork className="h-4 w-4 text-blue-500" />
        <span>{formatNumber(stats.totalForks)} forks</span>
      </button>
    </div>
  )
}

// Compact variant - Small card with essential info
export const CompactVariant: React.FC<BaseVariantProps> = ({
  repos,
  stats,
  className,
  onRepositoryClick,
}) => {
  if (!stats) return null

  const topRepos = repos.slice(0, 3)

  return (
    <Card className={cn("w-full max-w-sm", className)}>
      <CardContent className="p-4">
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Github className="h-5 w-5" />
              <span className="font-semibold">{repos.length} Repos</span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <button
                className="flex items-center gap-1 hover:text-yellow-600 transition-colors cursor-pointer"
                onClick={() => window.open(`https://github.com/${repos[0]?.owner?.login}/${repos[0]?.name}/stargazers`, '_blank')}
              >
                <Star className="h-4 w-4 text-yellow-500" />
                <span>{formatNumber(stats.totalStars)}</span>
              </button>
              <button
                className="flex items-center gap-1 hover:text-blue-600 transition-colors cursor-pointer"
                onClick={() => window.open(`https://github.com/${repos[0]?.owner?.login}/${repos[0]?.name}/forks`, '_blank')}
              >
                <GitFork className="h-4 w-4 text-blue-500" />
                <span>{formatNumber(stats.totalForks)}</span>
              </button>
            </div>
          </div>

          <div className="space-y-2">
            {topRepos.map((repo) => (
              <div
                key={repo.id}
                className="flex items-center justify-between p-2 rounded-md hover:bg-accent cursor-pointer transition-colors"
                onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
              >
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{repo.name}</p>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    {repo.language && (
                      <div className="flex items-center gap-1">
                        <div
                          className="w-2 h-2 rounded-full"
                          style={{ backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280" }}
                        />
                        <span>{repo.language}</span>
                      </div>
                    )}
                    <div className="flex items-center gap-1">
                      <Star className="h-3 w-3" />
                      <span>{formatNumber(repo.stargazers_count)}</span>
                    </div>
                  </div>
                </div>
                <ExternalLink className="h-3 w-3 text-muted-foreground" />
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

// Card variant - Medium-sized cards in a grid
export const CardVariant: React.FC<BaseVariantProps> = ({
  repos,
  className,
  onRepositoryClick,
}) => {
  return (
    <div className={cn("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", className)}>
      {repos.map((repo, index) => (
        <motion.div
          key={repo.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: index * 0.05 }}
        >
          <Card
            className="h-full hover:shadow-lg transition-shadow cursor-pointer group"
            onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
          >
            <CardContent className="p-6">
              <div className="space-y-4">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <h3 className="font-semibold text-lg mb-1">{repo.name}</h3>
                    <p className="text-sm text-muted-foreground line-clamp-2">
                      {repo.description || "No description available"}
                    </p>
                  </div>
                  <ExternalLink className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>

                {repo.topics.length > 0 && (
                  <div className="flex flex-wrap gap-1">
                    {repo.topics.slice(0, 3).map((topic) => (
                      <Badge key={topic} variant="secondary" className="text-xs">
                        {topic}
                      </Badge>
                    ))}
                  </div>
                )}

                <div className="flex items-center justify-between text-sm">
                  <div className="flex items-center gap-3">
                    {repo.language && (
                      <div className="flex items-center gap-1">
                        <div
                          className="w-3 h-3 rounded-full"
                          style={{ backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280" }}
                        />
                        <span>{repo.language}</span>
                      </div>
                    )}
                  </div>
                  <div className="flex items-center gap-3">
                    <button
                      className="flex items-center gap-1 hover:text-yellow-600 transition-colors"
                      onClick={(e) => {
                        e.stopPropagation()
                        window.open(`https://github.com/${repo.owner?.login}/${repo.name}/stargazers`, '_blank')
                      }}
                    >
                      <Star className="h-4 w-4 text-yellow-500" />
                      <span>{formatNumber(repo.stargazers_count)}</span>
                    </button>
                    <button
                      className="flex items-center gap-1 hover:text-blue-600 transition-colors"
                      onClick={(e) => {
                        e.stopPropagation()
                        window.open(`https://github.com/${repo.owner?.login}/${repo.name}/forks`, '_blank')
                      }}
                    >
                      <GitFork className="h-4 w-4 text-blue-500" />
                      <span>{formatNumber(repo.forks_count)}</span>
                    </button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>
      ))}
    </div>
  )
}

// Detailed variant - Full information with tabs
export const DetailedVariant: React.FC<BaseVariantProps & { onExport?: () => void }> = ({
  repos,
  stats,
  className,
  onRepositoryClick,
  onExport,
}) => {
  if (!stats) return null

  return (
    <Card className={cn("w-full", className)}>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Github className="h-6 w-6" />
            GitHub Repository Analytics
          </CardTitle>
          <div className="flex items-center gap-2">
            {repos[0] && (
              <Button 
                onClick={() => window.open(`https://github.com/${repos[0].owner?.login}`, '_blank')}
                variant="outline" 
                size="sm"
              >
                <Github className="h-4 w-4 mr-2" />
                View Profile
              </Button>
            )}
            {onExport && (
              <Button onClick={onExport} variant="outline" size="sm">
                <Download className="h-4 w-4 mr-2" />
                Export
              </Button>
            )}
          </div>
        </div>
      </CardHeader>
      <CardContent className="pt-0">
        <Tabs defaultValue="overview" className="w-full mt-4">
          <TabsList className="grid w-full grid-cols-4 mb-6">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="repositories">Repositories</TabsTrigger>
            <TabsTrigger value="languages">Languages</TabsTrigger>
            <TabsTrigger value="activity">Activity</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-6 mt-6">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <StatCard
                icon={<Package className="h-4 w-4" />}
                label="Total Repos"
                value={repos.length}
              />
              <StatCard
                icon={<Star className="h-4 w-4 text-yellow-500" />}
                label="Total Stars"
                value={formatNumber(stats.totalStars)}
                onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=stargazers`, '_blank')}
              />
              <StatCard
                icon={<GitFork className="h-4 w-4 text-blue-500" />}
                label="Total Forks"
                value={formatNumber(stats.totalForks)}
              />
              <StatCard
                icon={<Eye className="h-4 w-4 text-green-500" />}
                label="Total Watchers"
                value={formatNumber(stats.totalWatchers)}
              />
            </div>

            {stats.mostStarredRepo && (
              <Card 
                className="hover:shadow-md transition-shadow cursor-pointer"
                onClick={() => window.open(`https://github.com/${stats.mostStarredRepo.owner?.login}/${stats.mostStarredRepo.name}`, '_blank')}
              >
                <CardContent className="p-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-muted-foreground mb-2">Most Starred Repository</p>
                      <h4 className="font-semibold text-lg mb-1">{stats.mostStarredRepo.name}</h4>
                      <p className="text-sm text-muted-foreground">
                        {formatNumber(stats.mostStarredRepo.stargazers_count)} stars
                      </p>
                    </div>
                    <div className="flex flex-col items-center gap-2">
                      <TrendingUp className="h-8 w-8 text-muted-foreground" />
                      <ExternalLink className="h-4 w-4 text-muted-foreground" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          <TabsContent value="repositories" className="space-y-4 mt-6">
            <div className="space-y-3">
              {repos.map((repo) => (
                <Card
                  key={repo.id}
                  className="hover:shadow-md transition-shadow cursor-pointer group"
                  onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
                >
                  <CardContent className="p-5">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h4 className="font-semibold text-base">{repo.name}</h4>
                          {repo.private && (
                            <Badge variant="secondary" className="text-xs">Private</Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-3">
                          {repo.description || "No description"}
                        </p>
                        <div className="flex items-center gap-4 text-sm">
                          {repo.language && (
                            <div className="flex items-center gap-1">
                              <div
                                className="w-3 h-3 rounded-full"
                                style={{
                                  backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280",
                                }}
                              />
                              <span>{repo.language}</span>
                            </div>
                          )}
                          <button
                            className="flex items-center gap-1 hover:text-yellow-600 transition-colors"
                            onClick={(e) => {
                              e.stopPropagation()
                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/stargazers`, '_blank')
                            }}
                          >
                            <Star className="h-3 w-3" />
                            <span>{formatNumber(repo.stargazers_count)}</span>
                          </button>
                          <button
                            className="flex items-center gap-1 hover:text-blue-600 transition-colors"
                            onClick={(e) => {
                              e.stopPropagation()
                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/forks`, '_blank')
                            }}
                          >
                            <GitFork className="h-3 w-3" />
                            <span>{formatNumber(repo.forks_count)}</span>
                          </button>
                          <button
                            className="flex items-center gap-1 hover:text-purple-600 transition-colors"
                            onClick={(e) => {
                              e.stopPropagation()
                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/issues`, '_blank')
                            }}
                          >
                            <Users className="h-3 w-3" />
                            <span>{repo.open_issues_count} issues</span>
                          </button>
                          <div className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            <span>{formatDate(repo.updated_at)}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button
                          size="sm"
                          variant="ghost"
                          className="opacity-0 group-hover:opacity-100 transition-opacity"
                          onClick={(e) => {
                            e.stopPropagation()
                            window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')
                          }}
                        >
                          <ExternalLink className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          <TabsContent value="languages" className="space-y-6 mt-6">
            <div className="space-y-4">
              {stats.languages.map((lang) => (
                <div key={lang.language} className="space-y-2">
                  <div className="flex items-center justify-between text-sm">
                    <div className="flex items-center gap-2">
                      <div
                        className="w-3 h-3 rounded-full shadow-sm"
                        style={{ backgroundColor: lang.color }}
                      />
                      <span className="font-medium">{lang.language}</span>
                    </div>
                    <span className="text-muted-foreground">
                      {lang.count} repos ({lang.percentage.toFixed(1)}%)
                    </span>
                  </div>
                  <div className="px-1">
                    <Progress value={lang.percentage} className="h-2" />
                  </div>
                </div>
              ))}
            </div>
            
            {repos[0] && (
              <div className="pt-4 border-t">
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=`, '_blank')}
                >
                  <BarChart3 className="h-4 w-4 mr-2" />
                  View Language Statistics on GitHub
                </Button>
              </div>
            )}
          </TabsContent>

          <TabsContent value="activity" className="space-y-4 mt-6">
            <div className="space-y-3">
              {stats.recentActivity.map((activity, index) => {
                const repo = repos.find(r => r.name === activity.repository)
                return (
                  <div 
                    key={index} 
                    className="flex items-center gap-4 p-4 rounded-lg bg-accent/30 hover:bg-accent/50 transition-colors cursor-pointer"
                    onClick={() => repo && window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
                  >
                    <Activity className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium">{activity.description}</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        {activity.repository} • {formatDate(activity.timestamp)}
                      </p>
                    </div>
                    <ExternalLink className="h-3 w-3 text-muted-foreground flex-shrink-0" />
                  </div>
                )
              })}
            </div>
            
            {repos[0] && (
              <div className="pt-4 border-t">
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() => window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=updated`, '_blank')}
                >
                  <Activity className="h-4 w-4 mr-2" />
                  View All Activity on GitHub
                </Button>
              </div>
            )}
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}

// Helper component for stat cards
const StatCard: React.FC<{
  icon: React.ReactNode
  label: string
  value: string | number
  onClick?: () => void
}> = ({ icon, label, value, onClick }) => (
  <Card 
    className={cn(
      "transition-all",
      onClick && "hover:shadow-md cursor-pointer hover:scale-105"
    )}
    onClick={onClick}
  >
    <CardContent className="p-5">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-muted-foreground mb-1">{label}</p>
          <p className="text-2xl font-bold">{value}</p>
        </div>
        <div className="text-muted-foreground">
          {icon}
        </div>
      </div>
    </CardContent>
  </Card>
)