"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Users } from "lucide-react"
import CodeHighlighter from "@/components/SyntaxHighlighter"
import Header from "@/components/Header"
import Sidebar from "@/components/Sidebar"
import TableOfContents from "@/components/TableOfContents"
import { jsdocData } from "@/lib/jsdoc-data"

const bestPracticesData = jsdocData["best-practices"]

export default function BestPracticesPage() {
  // Generate TOC items from the data
  const tocItems = bestPracticesData.items.map((item, index) => ({
    id: item.tag.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase(),
    title: item.tag,
    level: 1
  }))

  return (
    <div className="min-h-screen bg-background">
      <Header /> 
      <Sidebar />
      <TableOfContents items={tocItems} />

      <div className="lg:ml-64 xl:mr-72 px-6 py-8">
        <div className="max-w-4xl mx-auto">
          {/* Section Header */}
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-foreground mb-2">
              {bestPracticesData.title}
            </h2>
            <p className="text-muted-foreground text-lg">
              {bestPracticesData.description}
            </p>
          </div>

          {/* Content Cards */}
          <div className="grid gap-6">
            {bestPracticesData.items.map((item, index) => (
              <Card
                key={index}
                id={item.tag.replace("@", "").replace(/[^a-zA-Z0-9]/g, "-")}
                className="border-border hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5"
              >
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-xl text-foreground flex items-center gap-2">
                      <Badge variant="secondary" className="bg-primary text-primary-foreground font-mono">
                        {item.tag}
                      </Badge>
                    </CardTitle>
                  </div>
                  <CardDescription className="text-muted-foreground text-base">{item.description}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Syntax */}
                  <div>
                    <h4 className="font-semibold text-foreground mb-2">Syntax:</h4>
                    <code className="block bg-muted text-muted-foreground p-3 rounded-md text-sm font-mono border border-border">
                      {item.syntax}
                    </code>
                  </div>

                  <Separator />

                  {/* Example with Syntax Highlighting */}
                  <div>
                    <h4 className="font-semibold text-foreground mb-2">Example:</h4>
                    <CodeHighlighter code={item.example} />
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="border-t border-border bg-card/50 mt-16">
        <div className="w-full px-6 py-8">
          <div className="text-center text-muted-foreground">
            <p className="mb-2">
              For more information, visit the{" "}
              <a
                href="https://jsdoc.app/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                official JSDoc documentation
              </a>
            </p>
            <p className="text-sm">This cheatsheet covers the most commonly used JSDoc tags and patterns.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}