import Widget from '@/components/ui/Widget/Widget'
import { ForumCategory, ForumPost, ForumTopic } from '@/proxy/forum/forum'
import { useLocalization } from '@/utils/hooks/useLocalization'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/tr'

interface AdminStatsProps {
  categories: ForumCategory[]
  topics: ForumTopic[]
  posts: ForumPost[]
  totalCounts: { categories: number; topics: number; posts: number }
}

interface Activity {
  message: string
  color: string
  date: Date
}

export function AdminStats({ categories, topics, posts, totalCounts }: AdminStatsProps) {
  const { translate } = useLocalization()
  const totalCategories = totalCounts.categories
  const activeCategories = categories.filter((c) => c.isActive).length
  const totalTopics = totalCounts.topics
  const solvedTopics = topics.filter((t) => t.isSolved).length
  const totalPosts = totalCounts.posts
  const acceptedAnswers = posts.filter((p) => p.isAcceptedAnswer).length

  const stats = [
    {
      title: translate('::App.Forum.Dashboard.TotalCategories'),
      value: totalCategories,
      subTitle: `${activeCategories} active`,
      icon: 'FaFolder' as const,
      color: 'blue' as const,
    },
    {
      title: translate('::App.Forum.Dashboard.TotalTopics'),
      value: totalTopics,
      subTitle: `${solvedTopics} solved`,
      icon: 'FaCommentDots' as const,
      color: 'green' as const,
    },
    {
      title: translate('::App.Forum.Dashboard.TotalPosts'),
      value: totalPosts,
      subTitle: `${acceptedAnswers} accepted answers`,
      icon: 'FaFileAlt' as const,
      color: 'orange' as const,
    },
    {
      title: translate('::App.Forum.Dashboard.EngagementRate'),
      value: totalTopics > 0 ? Math.round((totalPosts / totalTopics) * 100) / 100 : 0,
      subTitle: 'posts per topic',
      icon: 'FaChartLine' as const,
      color: 'purple' as const,
    },
  ]

  const recentActivities: Activity[] = []

  dayjs.extend(relativeTime)
  dayjs.locale('tr')

  topics.forEach((topic) => {
    const category = categories.find((c) => c.id === topic.categoryId)
    if (topic.creationTime) {
      recentActivities.push({
        message: `New topic created in ${category?.name ?? 'Unknown Category'}`,
        color: 'bg-blue-500',
        date: new Date(topic.creationTime),
      })
    }
  })

  // Posts -> "Post marked as accepted answer"
  posts.forEach((post) => {
    if (post.isAcceptedAnswer && post.creationTime) {
      recentActivities.push({
        message: 'Post marked as accepted answer',
        color: 'bg-emerald-500',
        date: new Date(post.creationTime),
      })
    }
  })

  // Categories -> "New category created: {name}"
  categories.forEach((category) => {
    if (category.creationTime) {
      recentActivities.push({
        message: `New category created: ${category.name}`,
        color: 'bg-orange-500',
        date: new Date(category.creationTime),
      })
    }
  })

  // Tarihe göre sırala, en güncel ilk 3 aktiviteyi al
  const latestActivities = recentActivities
    .sort((a, b) => b.date.getTime() - a.date.getTime())
    .slice(0, 3)

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat, index) => (
          <Widget
            key={index}
            title={stat.title}
            value={stat.value}
            subTitle={stat.subTitle}
            icon={stat.icon}
            color={stat.color}
          />
        ))}
      </div>

      {/* Recent Activity */}
      <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          {translate('::App.Forum.Dashboard.RecentActivity')}
        </h3>
        <div className="space-y-4">
          {latestActivities.map((activity, index) => (
            <div key={index} className="flex items-start space-x-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
              <div className={`w-2 h-2 ${activity.color} rounded-full mt-2`} />
              <div>
                <p className="text-sm text-gray-900 dark:text-white">{activity.message}</p>
                <p className="text-xs text-gray-500 dark:text-gray-400">{dayjs(activity.date).fromNow()}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}