import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { BookOpen, Code, Rocket, Zap } from 'lucide-react'

export default function TutorialsPage() {
  const tutorials = [
    {
      title: 'Getting Started with Phoenix Nexus',
      description: 'Build your first application using the Phoenix Nexus API',
      icon: Rocket,
      href: '/developers/docs/tutorials/getting-started',
      level: 'Beginner',
    },
    {
      title: 'Building a Multi-Tenant Application',
      description: 'Learn how to leverage multi-tenancy in your applications',
      icon: Code,
      href: '/developers/docs/tutorials/multi-tenant',
      level: 'Intermediate',
    },
    {
      title: 'Real-Time Resource Monitoring',
      description: 'Implement real-time monitoring with GraphQL subscriptions',
      icon: Zap,
      href: '/developers/docs/tutorials/realtime-monitoring',
      level: 'Advanced',
    },
    {
      title: 'Integrating with Keycloak SSO',
      description: 'Add single sign-on to your application',
      icon: BookOpen,
      href: '/developers/docs/tutorials/keycloak-sso',
      level: 'Intermediate',
    },
  ]

  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        <div className="container mx-auto py-12 px-4 max-w-6xl">
          <div className="mb-12 text-center">
            <h1 className="text-5xl font-bold text-white mb-4">Tutorials</h1>
            <p className="text-xl text-gray-300">
              Step-by-step guides to help you build with Phoenix Nexus
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2">
            {tutorials.map((tutorial) => {
              const Icon = tutorial.icon
              return (
                <Card key={tutorial.href} className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
                  <CardHeader>
                    <div className="flex items-start gap-4">
                      <div className="rounded-lg bg-phoenix-fire/20 p-3">
                        <Icon className="h-6 w-6 text-phoenix-fire" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <CardTitle>{tutorial.title}</CardTitle>
                          <span className="rounded-full bg-studio-medium px-2 py-1 text-xs text-gray-400">
                            {tutorial.level}
                          </span>
                        </div>
                        <CardDescription>{tutorial.description}</CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <Button variant="outline" asChild>
                      <Link href={tutorial.href}>Start Tutorial →</Link>
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>

          <Card className="mt-12 border-studio-medium">
            <CardHeader>
              <CardTitle>More Resources</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-3">
                <Button variant="outline" asChild>
                  <Link href="/developers/docs/api/graphql">API Reference</Link>
                </Button>
                <Button variant="outline" asChild>
                  <Link href="/developers/docs/quickstart">Quick Start</Link>
                </Button>
                <Button variant="outline" asChild>
                  <Link href="/developers/docs/guides/authentication">Authentication</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </>
  )
}

