import { AdminMetrics } from '@/components/admin-metrics'
import { Button } from '@/components/ui/button'
import { Zap, Settings, Activity, TrendingUp } from 'lucide-react'

export default async function AdminAIPage() {
  // Mock AI metrics - in a real app, these would come from analytics
  const aiMetrics = [
    {
      title: 'Total Requests',
      value: '856',
      trend: { value: 12, isPositive: true },
      icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
    },
    {
      title: 'Success Rate',
      value: '98.5%',
      trend: { value: 2, isPositive: true },
      icon: <TrendingUp className="h-5 w-5 text-green-600 dark:text-green-400" />,
    },
    {
      title: 'Avg Response Time',
      value: '1.2s',
      trend: { value: 5, isPositive: true },
      icon: <Activity className="h-5 w-5 text-primary dark:text-primary-foreground" />,
    },
    {
      title: 'Active Features',
      value: '6',
      icon: <Settings className="h-5 w-5 text-purple-600 dark:text-purple-400" />,
    },
  ]

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
            AI Management
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            Monitor and configure AI features
          </p>
        </div>
        <Button variant="outline">
          <Settings className="mr-2 h-4 w-4" />
          Configure
        </Button>
      </div>

      <AdminMetrics metrics={aiMetrics} />

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            Active AI Features
          </h2>
          <div className="space-y-3">
            {[
              'Title Suggestions',
              'Semantic Search',
              'Paragraph Reformulation',
              'Memory Echo',
              'Language Detection',
              'Auto Labeling',
            ].map((feature) => (
              <div
                key={feature}
                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
              >
                <span className="text-sm text-gray-900 dark:text-white">
                  {feature}
                </span>
                <span className="px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900 rounded-full">
                  Active
                </span>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            AI Provider Status
          </h2>
          <div className="space-y-3">
            {[
              { name: 'OpenAI', status: 'Connected', requests: '642' },
              { name: 'Ollama', status: 'Available', requests: '214' },
            ].map((provider) => (
              <div
                key={provider.name}
                className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
              >
                <div>
                  <p className="text-sm font-medium text-gray-900 dark:text-white">
                    {provider.name}
                  </p>
                  <p className="text-xs text-gray-600 dark:text-gray-400">
                    {provider.requests} requests
                  </p>
                </div>
                <span
                  className={`px-2 py-1 text-xs font-medium rounded-full ${
                    provider.status === 'Connected'
                      ? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900'
                      : 'text-primary dark:text-primary-foreground bg-primary/10 dark:bg-primary/20'
                  }`}
                >
                  {provider.status}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Recent AI Requests
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          Recent AI requests will be displayed here.
        </p>
      </div>
    </div>
  )
}