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

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { auth } from '@/auth'
import { redirect } from 'next/navigation'
import Link from 'next/link'
import { ArrowLeft, TestTube } from 'lucide-react'
import { AI_TESTER } from './ai-tester'

export default async function AITestPage() {
  const session = await auth()

  if ((session?.user as any)?.role !== 'ADMIN') {
    redirect('/')
  }

  return (
    <div className="container mx-auto py-10 px-4 max-w-6xl">
      <div className="flex justify-between items-center mb-8">
        <div className="flex items-center gap-3">
          <Link href="/admin/settings">
            <Button variant="outline" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-bold flex items-center gap-2">
              <TestTube className="h-8 w-8" />
              AI Provider Testing
            </h1>
            <p className="text-muted-foreground mt-1">
              Test your AI providers for tag generation and semantic search embeddings
            </p>
          </div>
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Tags Provider Test */}
        <Card className="border-blue-200 dark:border-blue-900">
          <CardHeader className="bg-blue-50/50 dark:bg-blue-950/20">
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">🏷️</span>
              Tags Generation Test
            </CardTitle>
            <CardDescription>
              Test the AI provider responsible for automatic tag suggestions
            </CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            <AI_TESTER type="tags" />
          </CardContent>
        </Card>

        {/* Embeddings Provider Test */}
        <Card className="border-green-200 dark:border-green-900">
          <CardHeader className="bg-green-50/50 dark:bg-green-950/20">
            <CardTitle className="flex items-center gap-2">
              <span className="text-2xl">🔍</span>
              Embeddings Test
            </CardTitle>
            <CardDescription>
              Test the AI provider responsible for semantic search embeddings
            </CardDescription>
          </CardHeader>
          <CardContent className="pt-6">
            <AI_TESTER type="embeddings" />
          </CardContent>
        </Card>
      </div>

      {/* Info Section */}
      <Card className="mt-6">
        <CardHeader>
          <CardTitle>ℹ️ How Testing Works</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 text-sm">
          <div>
            <h4 className="font-semibold mb-2">🏷️ Tags Generation Test:</h4>
            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
              <li>Sends a sample note to the AI provider</li>
              <li>Requests 3-5 relevant tags based on the content</li>
              <li>Displays the generated tags with confidence scores</li>
              <li>Measures response time</li>
            </ul>
          </div>
          <div>
            <h4 className="font-semibold mb-2">🔍 Embeddings Test:</h4>
            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
              <li>Sends a sample text to the embedding provider</li>
              <li>Generates a vector representation (list of numbers)</li>
              <li>Displays embedding dimensions and sample values</li>
              <li>Verifies the vector is valid and properly formatted</li>
            </ul>
          </div>
          <div className="bg-amber-50 dark:bg-amber-950/20 p-4 rounded-lg border border-amber-200 dark:border-amber-900">
            <p className="font-semibold text-amber-900 dark:text-amber-100">💡 Tip:</p>
            <p className="text-amber-800 dark:text-amber-200 mt-1">
              You can use different providers for tags and embeddings! For example, use Ollama (free) for tags
              and OpenAI (best quality) for embeddings to optimize costs and performance.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}