frontend/src/pages/Home.tsx

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'

import { 
  Brain, 
  MessageSquare, 
  BookOpen, 
  Zap,
  Shield,
  Cpu,
  ArrowRight
} from 'lucide-react'
import { Link } from 'react-router-dom'

const features = [
  {
    icon: Brain,
    title: "Local AI Models",
    description: "Run powerful language models locally on your machine with full privacy control.",
    color: "text-blue-500"
  },
  {
    icon: MessageSquare,
    title: "Interactive Chat",
    description: "Playground interface for testing prompts and exploring model capabilities.",
    color: "text-green-500"
  },
  {
    icon: Shield,
    title: "Privacy First",
    description: "Your data never leaves your machine. Complete privacy and security guaranteed.",
    color: "text-purple-500"
  },
  {
    icon: Zap,
    title: "High Performance",
    description: "Optimized for speed with model caching and efficient resource management.",
    color: "text-yellow-500"
  }
]

const quickActions = [
  {
    title: "Start Chatting",
    description: "Jump into the playground and start experimenting",
    href: "/playground",
    icon: MessageSquare,
    primary: true
  },
  {
    title: "Browse Models",
    description: "Explore available models and their capabilities",
    href: "/models",
    icon: BookOpen,
    primary: false
  },
  {
    title: "View Settings",
    description: "Configure your application preferences",
    href: "/settings",
    icon: Cpu,
    primary: false
  }
]

export function Home() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-8">
        {/* Hero Section */}
        <div className="text-center mb-12">
          <div className="flex items-center justify-center mb-4">
            <div className="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center">
              <Brain className="h-8 w-8 text-primary-foreground" />
            </div>
          </div>
          <h1 className="text-4xl font-bold mb-4">Edge LLM</h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
            Your local AI companion. Run powerful language models on your own hardware with complete privacy and control.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Link to="/playground">
              <Button size="lg">
                <MessageSquare className="h-5 w-5 mr-2" />
                Start Chatting
              </Button>
            </Link>
            <Link to="/models">
              <Button variant="outline" size="lg">
                <BookOpen className="h-5 w-5 mr-2" />
                Browse Models
              </Button>
            </Link>
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {features.map((feature, index) => (
            <Card key={index} className="text-center">
              <CardContent className="pt-6">
                <feature.icon className={`h-12 w-12 mx-auto mb-4 ${feature.color}`} />
                <h3 className="font-semibold mb-2">{feature.title}</h3>
                <p className="text-sm text-muted-foreground">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          {quickActions.map((action, index) => (
            <Card key={index} className="hover:shadow-lg transition-shadow">
              <CardContent className="pt-6">
                <div className="flex items-center gap-3 mb-3">
                  <action.icon className="h-6 w-6 text-primary" />
                  <h3 className="font-semibold">{action.title}</h3>
                </div>
                <p className="text-sm text-muted-foreground mb-4">{action.description}</p>
                <Link to={action.href}>
                  <Button 
                    variant={action.primary ? "default" : "outline"} 
                    className="w-full"
                  >
                    Get Started
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

        {/* Getting Started */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <Card>
            <CardHeader>
              <CardTitle>Getting Started</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                      1
                    </div>
                    <h4 className="font-medium">Browse Available Models</h4>
                  </div>
                  <p className="text-sm text-muted-foreground pl-8">
                    Check out our model catalog to see what's available for your use case.
                  </p>
                </div>
                
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                      2
                    </div>
                    <h4 className="font-medium">Load a Model</h4>
                  </div>
                  <p className="text-sm text-muted-foreground pl-8">
                    Select and load a model that fits your hardware and requirements.
                  </p>
                </div>
                
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <div className="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-medium">
                      3
                    </div>
                    <h4 className="font-medium">Start Chatting</h4>
                  </div>
                  <p className="text-sm text-muted-foreground pl-8">
                    Go to the playground and start experimenting with prompts.
                  </p>
                </div>
              </div>
              
              <div className="pt-4 border-t">
                <Link to="/playground">
                  <Button className="w-full md:w-auto">
                    <MessageSquare className="h-4 w-4 mr-2" />
                    Open Playground
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>

          {/* Status */}
          <Card>
            <CardHeader>
              <CardTitle>System Status</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Backend Status</span>
                  <span className="inline-flex items-center gap-1 text-sm text-green-600">
                    <div className="w-2 h-2 bg-green-600 rounded-full"></div>
                    Online
                  </span>
                </div>
                
                <div className="flex items-center justify-between">
                  <span className="text-sm">Models Loaded</span>
                  <span className="text-sm font-medium">Ready</span>
                </div>
                
                <div className="flex items-center justify-between">
                  <span className="text-sm">Memory Usage</span>
                  <span className="text-sm font-medium">Optimized</span>
                </div>
              </div>
              
              <div className="pt-4 border-t">
                <Link to="/settings">
                  <Button variant="outline" className="w-full md:w-auto">
                    <Cpu className="h-4 w-4 mr-2" />
                    View Settings
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}