import { Metadata } from "next"
import { Book, Code, Rocket, Settings, Sparkles, Terminal, Workflow, Zap } from "lucide-react"
import Link from "next/link"
import { generateSEO } from "@/lib/seo"

const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || 'https://open-prompt.netlify.app'

export const metadata: Metadata = generateSEO({
    title: "Documentation | OpenPrompt",
    description: "Complete documentation for OpenPrompt. Learn how to create, share, embed, and run AI prompts. API reference, prompt frameworks, and workflow guides.",
    url: `${BASE_URL}/docs`,
    keywords: ["OpenPrompt docs", "API documentation", "prompt creation guide", "embed prompts"],
}) as Metadata

const sections = [
    {
        title: "Getting Started",
        icon: Rocket,
        description: "Learn the basics of OpenPrompt",
        links: [
            { href: "#", label: "Introduction" },
            { href: "#", label: "Creating Your First Prompt" },
            { href: "#", label: "Running Prompts" },
            { href: "#", label: "Sharing & Embedding" },
        ],
    },
    {
        title: "Prompt Frameworks",
        icon: Sparkles,
        description: "Master proven prompt engineering techniques",
        links: [
            { href: "/frameworks", label: "Framework Overview" },
            { href: "#", label: "RACE Framework" },
            { href: "#", label: "CARE Framework" },
            { href: "#", label: "CREATE Framework" },
        ],
    },
    {
        title: "Tools & Features",
        icon: Zap,
        description: "Explore our 65+ AI-powered tools",
        links: [
            { href: "/tools", label: "Tools Overview" },
            { href: "#", label: "Marketing Tools" },
            { href: "#", label: "Business Tools" },
            { href: "#", label: "Content Tools" },
        ],
    },
    {
        title: "Workflows",
        icon: Workflow,
        description: "Chain prompts together for complex tasks",
        links: [
            { href: "/workflows", label: "Workflow Builder" },
            { href: "#", label: "Creating Workflows" },
            { href: "#", label: "Workflow Templates" },
            { href: "#", label: "Advanced Patterns" },
        ],
    },
    {
        title: "API Reference",
        icon: Code,
        description: "Integrate OpenPrompt into your apps",
        links: [
            { href: "#", label: "API Overview" },
            { href: "#", label: "Authentication" },
            { href: "#", label: "Endpoints" },
            { href: "#", label: "Rate Limits" },
        ],
    },
    {
        title: "Configuration",
        icon: Settings,
        description: "Customize your OpenPrompt experience",
        links: [
            { href: "#", label: "Account Settings" },
            { href: "#", label: "API Keys" },
            { href: "#", label: "Ollama Integration" },
            { href: "#", label: "Webhooks" },
        ],
    },
]

export default function DocsPage() {
    return (
        <div className="container mx-auto px-4 py-16">
            <div className="max-w-5xl mx-auto">
                {/* Header */}
                <div className="text-center mb-16">
                    <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full mb-6">
                        <Book className="h-4 w-4" />
                        <span className="text-sm font-medium">Documentation</span>
                    </div>
                    <h1 className="text-4xl font-bold mb-4">
                        Learn OpenPrompt
                    </h1>
                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
                        Everything you need to create, share, and run AI prompts like a pro.
                    </p>
                </div>

                {/* Quick Start */}
                <div className="bg-linear-to-r from-primary/10 to-accent/10 rounded-2xl p-8 mb-16">
                    <div className="flex items-start gap-4">
                        <Terminal className="h-8 w-8 text-primary shrink-0" />
                        <div>
                            <h2 className="text-xl font-semibold mb-2">Quick Start</h2>
                            <p className="text-muted-foreground mb-4">
                                Get up and running with OpenPrompt in under 5 minutes.
                            </p>
                            <ol className="list-decimal list-inside space-y-2 text-muted-foreground">
                                <li>Sign up for a free account</li>
                                <li>Explore existing prompts or create your own</li>
                                <li>Run prompts with your preferred AI model</li>
                                <li>Share and collect prompts from the community</li>
                            </ol>
                        </div>
                    </div>
                </div>

                {/* Documentation Sections */}
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {sections.map((section) => (
                        <div
                            key={section.title}
                            className="bg-card border border-border rounded-xl p-6 hover:border-primary/50 transition-colors"
                        >
                            <section.icon className="h-8 w-8 text-primary mb-4" />
                            <h3 className="text-lg font-semibold mb-2">{section.title}</h3>
                            <p className="text-sm text-muted-foreground mb-4">
                                {section.description}
                            </p>
                            <ul className="space-y-2">
                                {section.links.map((link) => (
                                    <li key={link.label}>
                                        <Link
                                            href={link.href}
                                            className="text-sm text-primary hover:underline"
                                        >
                                            {link.label} →
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>

                {/* Help Section */}
                <div className="mt-16 text-center">
                    <p className="text-muted-foreground">
                        Can&apos;t find what you&apos;re looking for?{" "}
                        <Link href="/contact" className="text-primary hover:underline">
                            Contact support
                        </Link>
                    </p>
                </div>
            </div>
        </div>
    )
}