'use client'

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import { Card } from '@/components/ui/card'
import { Users, FileText, Share, CheckCircle } from 'lucide-react'
import Link from 'next/link'

interface AdminStats {
  totalUsers: number
  totalPrompts: number
  sharedPrompts: number
  publishedPrompts: number
}

export default function AdminDashboard() {
  const t = useTranslations('admin')
  const [stats, setStats] = useState<AdminStats | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const response = await fetch('/api/admin/stats')
        if (response.ok) {
          const data = await response.json()
          setStats(data)
        }
      } catch (error) {
        console.error('Failed to fetch admin stats:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchStats()
  }, [])

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">{t('dashboard')}</h1>
          <p className="text-muted-foreground">
            {t('dashboardDesc') || 'Manage users, prompts, and system settings'}
          </p>
        </div>
        
        {/* Loading State */}
        <div className="flex items-center justify-center min-h-96">
          <div className="flex flex-col items-center gap-3">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            <p className="text-sm text-muted-foreground">{t('loadingDashboard')}</p>
          </div>
        </div>
      </div>
    )
  }

  const statCards = [
    {
      title: t('totalUsers'),
      value: stats?.totalUsers || 0,
      icon: Users,
      color: 'text-blue-600',
    },
    {
      title: t('totalPrompts'),
      value: stats?.totalPrompts || 0,
      icon: FileText,
      color: 'text-green-600',
    },
    {
      title: t('sharedPrompts'),
      value: stats?.sharedPrompts || 0,
      icon: Share,
      color: 'text-yellow-600',
    },
    {
      title: t('publishedPrompts'),
      value: stats?.publishedPrompts || 0,
      icon: CheckCircle,
      color: 'text-purple-600',
    },
  ]

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">{t('dashboard')}</h1>
        <p className="text-muted-foreground">
          {t('dashboardDesc') || 'Manage users, prompts, and system settings'}
        </p>
      </div>

      <div className="space-y-6 lg:space-y-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
          {statCards.map((stat, index) => {
            const Icon = stat.icon
            return (
              <Card key={index} className="p-4 lg:p-6 hover:shadow-md transition-all duration-200 border-border hover:border-primary/20">
                <div className="flex items-center justify-between">
                  <div className="min-w-0 flex-1">
                    <p className="text-xs sm:text-sm font-medium text-muted-foreground mb-1 truncate">
                      {stat.title}
                    </p>
                    <p className="text-xl sm:text-2xl lg:text-3xl font-bold text-foreground">
                      {stat.value.toLocaleString()}
                    </p>
                  </div>
                  <div className="flex-shrink-0 ml-3">
                    <div className="p-2 lg:p-3 rounded-full bg-muted/50">
                      <Icon className={`h-5 w-5 lg:h-6 lg:w-6 ${stat.color}`} />
                    </div>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>

        {/* Quick Actions and System Status */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Quick Actions */}
          <Card className="p-4 lg:p-6">
            <div className="flex items-center gap-3 mb-4 lg:mb-6">
              <div className="p-2 rounded-lg bg-primary/10">
                <CheckCircle className="h-5 w-5 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground">
                {t('quickActions')}
              </h3>
            </div>
            <div className="space-y-3">
              <Link
                href="/admin/review"
                className="group block p-3 lg:p-4 rounded-lg border border-border hover:border-primary/30 hover:bg-accent/50 transition-all duration-200"
              >
                <div className="flex items-center gap-3">
                  <div className="p-2 rounded-md bg-primary/5 group-hover:bg-primary/10 transition-colors">
                    <FileText className="h-4 w-4 text-primary" />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="font-medium text-foreground group-hover:text-primary transition-colors">
                      {t('allPrompts')}
                    </div>
                    <div className="text-sm text-muted-foreground mt-0.5">
                      {t('allPromptsDesc')}
                    </div>
                  </div>
                </div>
              </Link>
            </div>
          </Card>

          {/* System Status */}
          <Card className="p-4 lg:p-6">
            <div className="flex items-center gap-3 mb-4 lg:mb-6">
              <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900/30">
                <CheckCircle className="h-5 w-5 text-green-600" />
              </div>
              <h3 className="text-lg font-semibold text-foreground">
                {t('systemStatus')}
              </h3>
            </div>
            <div className="space-y-3">
              <div className="flex items-center justify-between p-3 rounded-lg bg-muted/30">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <span className="text-sm font-medium text-foreground">
                    {t('databaseStatus')}
                  </span>
                </div>
                <span className="text-sm font-medium text-green-600">
                  {t('healthy')}
                </span>
              </div>
              <div className="flex items-center justify-between p-3 rounded-lg bg-muted/30">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-green-500"></div>
                  <span className="text-sm font-medium text-foreground">
                    {t('authStatus')}
                  </span>
                </div>
                <span className="text-sm font-medium text-green-600">
                  {t('healthy')}
                </span>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}