lucidia-app/app/models/page.tsx

import { HUGGINGFACE_MODELS } from '@/lib/huggingface';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Cpu, Code, Zap, Brain } from 'lucide-react';
import Link from 'next/link';

export default function ModelsPage() {
  const modelsByCategory = {
    general: Object.entries(HUGGINGFACE_MODELS).filter(([_, m]) => m.category === 'general'),
    code: Object.entries(HUGGINGFACE_MODELS).filter(([_, m]) => m.category === 'code'),
    quick: Object.entries(HUGGINGFACE_MODELS).filter(([_, m]) => m.category === 'quick'),
  };

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'general': return <Brain className="h-5 w-5" />;
      case 'code': return <Code className="h-5 w-5" />;
      case 'quick': return <Zap className="h-5 w-5" />;
      default: return <Cpu className="h-5 w-5" />;
    }
  };

  const getCategoryTitle = (category: string) => {
    switch (category) {
      case 'general': return 'General Purpose Models';
      case 'code': return 'Code Generation Models';
      case 'quick': return 'Fast Response Models';
      default: return 'Models';
    }
  };

  return (
    <div className="flex min-h-screen flex-col">
      <header className="border-b bg-card">
        <div className="container flex h-16 items-center px-4">
          <Link href="/" className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground">
            <ArrowLeft className="h-4 w-4" />
            Back to Chat
          </Link>
        </div>
      </header>

      <main className="flex-1 p-8">
        <div className="container max-w-6xl space-y-8">
          <div>
            <h1 className="text-4xl font-bold tracking-tight">
              Available Models
            </h1>
            <p className="mt-2 text-lg text-muted-foreground">
              Lucidia intelligently routes your requests to the best open-source model for each task.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-3">
            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <div className="rounded-full bg-blue-500/10 p-2">
                    <Brain className="h-5 w-5 text-blue-500" />
                  </div>
                  <CardTitle>OpenAI</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  GPT-4o, GPT-3.5 Turbo
                </p>
                <p className="text-xs">Best for: General tasks, code</p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <div className="rounded-full bg-purple-500/10 p-2">
                    <Brain className="h-5 w-5 text-purple-500" />
                  </div>
                  <CardTitle>Anthropic</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  Claude 3 Sonnet, Claude 3 Haiku
                </p>
                <p className="text-xs">Best for: Writing, analysis</p>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <div className="flex items-center gap-2">
                  <div className="rounded-full bg-orange-500/10 p-2">
                    <Cpu className="h-5 w-5 text-orange-500" />
                  </div>
                  <CardTitle>Hugging Face</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  {Object.keys(HUGGINGFACE_MODELS).length} open-source models
                </p>
                <p className="text-xs">Best for: Cost-effective inference</p>
              </CardContent>
            </Card>
          </div>

          {Object.entries(modelsByCategory).map(([category, models]) => (
            <div key={category} className="space-y-4">
              <div className="flex items-center gap-3">
                {getCategoryIcon(category)}
                <h2 className="text-2xl font-semibold">
                  {getCategoryTitle(category)}
                </h2>
              </div>

              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {models.map(([key, model]) => (
                  <Card key={key} className="hover:border-primary/50 transition-colors">
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <CardTitle className="text-lg">{model.name}</CardTitle>
                        <Badge variant="outline" className="ml-2">
                          {model.category}
                        </Badge>
                      </div>
                      <CardDescription className="text-xs font-mono">
                        {model.id}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <p className="text-sm text-muted-foreground">
                        {model.description}
                      </p>
                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
                        <Badge variant="secondary" className="text-xs">
                          {model.contextWindow.toLocaleString()} tokens
                        </Badge>
                        <span>•</span>
                        <span>Free to use</span>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          ))}

          <Card className="border-primary/50 bg-primary/5">
            <CardHeader>
              <CardTitle>Intelligent Routing</CardTitle>
              <CardDescription>
                Lucidia automatically selects the best model for your task
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex gap-3">
                <div className="flex-shrink-0 rounded-full bg-blue-500/10 p-2">
                  <Code className="h-4 w-4 text-blue-500" />
                </div>
                <div>
                  <p className="font-medium">Code Tasks</p>
                  <p className="text-sm text-muted-foreground">
                    Routes to GPT-4o or Code Llama for structured output
                  </p>
                </div>
              </div>

              <div className="flex gap-3">
                <div className="flex-shrink-0 rounded-full bg-purple-500/10 p-2">
                  <Brain className="h-4 w-4 text-purple-500" />
                </div>
                <div>
                  <p className="font-medium">Writing Tasks</p>
                  <p className="text-sm text-muted-foreground">
                    Routes to Claude for nuanced, creative content
                  </p>
                </div>
              </div>

              <div className="flex gap-3">
                <div className="flex-shrink-0 rounded-full bg-green-500/10 p-2">
                  <Zap className="h-4 w-4 text-green-500" />
                </div>
                <div>
                  <p className="font-medium">Quick Tasks</p>
                  <p className="text-sm text-muted-foreground">
                    Routes to GPT-3.5 or Phi-3 Mini for fast responses
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}