Keep/keep-notes/app/(main)/admin/ai/page.tsx

import { AdminMetrics } from '@/components/admin-metrics'
import { Button } from '@/components/ui/button'
import { Zap, Settings, Activity, TrendingUp } from 'lucide-react'
import Link from 'next/link'
import { getSystemConfig } from '@/lib/config'

export default async function AdminAIPage() {
  const config = await getSystemConfig()

  // Determine provider status based on config
  const openaiKey = config.OPENAI_API_KEY
  const ollamaUrl = config.OLLAMA_BASE_URL || config.OLLAMA_BASE_URL_TAGS || config.OLLAMA_BASE_URL_EMBEDDING

  const providers = [
    {
      name: 'OpenAI',
      status: openaiKey ? 'Connected' : 'Not Configured',
      requests: 'N/A' // We don't track request counts yet
    },
    {
      name: 'Ollama',
      status: ollamaUrl ? 'Available' : 'Not Configured',
      requests: 'N/A'
    },
  ]

  // Mock AI metrics - in a real app, these would come from analytics
  // TODO: Implement real analytics tracking
  const aiMetrics = [
    {
      title: 'Total Requests',
      value: '—',
      trend: { value: 0, isPositive: true },
      icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
    },
    {
      title: 'Success Rate',
      value: '100%',
      trend: { value: 0, isPositive: true },
      icon: <TrendingUp className="h-5 w-5 text-green-600 dark:text-green-400" />,
    },
    {
      title: 'Avg Response Time',
      value: '—',
      trend: { value: 0, 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>
        <Link href="/admin/settings">
          <Button variant="outline">
            <Settings className="mr-2 h-4 w-4" />
            Configure
          </Button>
        </Link>
      </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">
            {providers.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' || provider.status === 'Available'
                      ? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900'
                      : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800'
                    }`}
                >
                  {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. (Coming Soon)
        </p>
      </div>
    </div>
  )
}