"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { BookOpen, Code, FileText, Hash, Settings, Tag, ArrowRight, Info, 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 Link from "next/link"
import { jsdocData } from "@/lib/jsdoc-data"

const navigationSections = [
  {
    id: "basic-tags",
    title: "Basic Tags",
    description: "Essential JSDoc tags for documenting your code",
    icon: Tag,
    href: "/basic-tags",
  },
  {
    id: "parameters",
    title: "Parameters & Returns",
    description: "Document function parameters, return values, and exceptions",
    icon: Code,
    href: "/parameters",
  },
  {
    id: "type-definitions",
    title: "Type Definitions",
    description: "Define and document custom types and interfaces",
    icon: Hash,
    href: "/type-definitions",
  },
  {
    id: "functions",
    title: "Functions & Classes",
    description: "Document functions, classes, constructors, and methods",
    icon: Settings,
    href: "/functions",
  },
  {
    id: "modules",
    title: "Modules & Namespaces",
    description: "Organize code with modules, namespaces, and membership",
    icon: FileText,
    href: "/modules",
  },
  {
    id: "advanced",
    title: "Advanced Tags",
    description: "Advanced JSDoc features for complex documentation needs",
    icon: BookOpen,
    href: "/advanced",
  },
  {
    id: "objects",
    title: "Objects & Interfaces",
    description: "Document object structures, interfaces, and inheritance",
    icon: Hash,
    href: "/objects",
  },
  {
    id: "documentation",
    title: "Documentation Tags",
    description: "Tags for linking, examples, and additional documentation",
    icon: Info,
    href: "/documentation",
  },
  {
    id: "examples",
    title: "Complete Examples",
    description: "Real-world JSDoc documentation examples",
    icon: Info,
    href: "/examples",
  },
  {
    id: "best-practices",
    title: "Best Practices",
    description: "Guidelines for writing effective JSDoc documentation",
    icon: Users,
    href: "/best-practices",
  },
]

export default function JSDocCheatsheet() {
  // TOC items for the homepage
  const tocItems = [
    { id: "quick-reference", title: "Quick Reference", level: 1 },
    { id: "kitchen-sink", title: "Kitchen Sink Example", level: 1 },
    { id: "navigation-grid", title: "Explore JSDoc Sections", level: 1 },
  ]

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

      <div className="lg:ml-64 xl:mr-72 p-2">
        <div className="max-w-6xl mx-auto">
          {/* Quick Reference */}
          <Card id="quick-reference" className="bg-muted/50 mb-4">
            <CardHeader>
              <CardTitle className="text-2xl text-foreground flex items-center gap-2">
                <BookOpen className="h-6 w-6" />
                Quick Reference
              </CardTitle>
              <CardDescription>
                Essential JSDoc tags you'll use most frequently
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Basic Tags</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/basic-tags#description">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@description</code>
                    </Link>
                    <Link href="/basic-tags#author">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@author</code>
                    </Link>
                    <Link href="/basic-tags#version">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@version</code>
                    </Link>
                    <Link href="/basic-tags#since">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@since</code>
                    </Link>
                    <Link href="/basic-tags#deprecated">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@deprecated</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Parameters & Returns</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/parameters#param">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@param</code>
                    </Link>
                    <Link href="/parameters#returns">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@returns</code>
                    </Link>
                    <Link href="/parameters#throws">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@throws</code>
                    </Link>
                    <Link href="/parameters#yields">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@yields</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Types & Properties</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/type-definitions#typedef">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@typedef</code>
                    </Link>
                    <Link href="/type-definitions#property">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@property</code>
                    </Link>
                    <Link href="/type-definitions#type">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@type</code>
                    </Link>
                    <Link href="/type-definitions#enum">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@enum</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Functions & Classes</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/functions#function">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@function</code>
                    </Link>
                    <Link href="/functions#class">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@class</code>
                    </Link>
                    <Link href="/functions#constructor">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@constructor</code>
                    </Link>
                    <Link href="/functions#method">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@method</code>
                    </Link>
                    <Link href="/functions#static">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@static</code>
                    </Link>
                    <Link href="/functions#override">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@override</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Modules & Namespaces</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/modules#module">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@module</code>
                    </Link>
                    <Link href="/modules#namespace">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@namespace</code>
                    </Link>
                    <Link href="/modules#memberof">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@memberof</code>
                    </Link>
                    <Link href="/modules#exports">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@exports</code>
                    </Link>
                    <Link href="/modules#requires">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@requires</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Objects & Interfaces</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/objects#interface">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@interface</code>
                    </Link>
                    <Link href="/objects#implements">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@implements</code>
                    </Link>
                    <Link href="/objects#extends">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@extends</code>
                    </Link>
                    <Link href="/objects#mixin">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@mixin</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Events & Callbacks</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/advanced#callback">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@callback</code>
                    </Link>
                    <Link href="/advanced#event">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@event</code>
                    </Link>
                    <Link href="/advanced#fires">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@fires</code>
                    </Link>
                    <Link href="/advanced#listens">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@listens</code>
                    </Link>
                    <Link href="/advanced#mixes">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@mixes</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Documentation & Links</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/documentation#example">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@example</code>
                    </Link>
                    <Link href="/documentation#see">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@see</code>
                    </Link>
                    <Link href="/documentation#link">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@link</code>
                    </Link>
                    <Link href="/documentation#tutorial">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@tutorial</code>
                    </Link>
                    <Link href="/documentation#todo">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@todo</code>
                    </Link>
                  </div>
                </div>
                <div className="space-y-2">
                  <h4 className="font-semibold text-foreground">Advanced Features</h4>
                  <div className="space-y-1 text-sm">
                    <Link href="/advanced#abstract">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@abstract</code>
                    </Link>
                    <Link href="/parameters#async">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@async</code>
                    </Link>
                    <Link href="/parameters#generator">
                      <code className="block bg-background px-2 py-1 rounded text-primary hover:bg-primary/10 hover:text-primary-foreground transition-colors cursor-pointer">@generator</code>
                    </Link>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Kitchen Sink Example */}
          <Card id="kitchen-sink" className="border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg mb-12">
            <CardHeader>
              <CardTitle className="text-2xl text-foreground flex items-center gap-2">
                <Badge variant="default" className="bg-primary text-primary-foreground">
                  Kitchen Sink Example
                </Badge>
              </CardTitle>
              <CardDescription className="text-base">
                A comprehensive example showcasing multiple JSDoc features in one code block
              </CardDescription>
            </CardHeader>
            <CardContent>
              <CodeHighlighter code={jsdocData.kitchenSink.items[0].example} />
            </CardContent>
          </Card>

          {/* Navigation Grid */}
          <div id="navigation-grid" className="text-center mb-12">
            <h2 className="text-3xl font-bold text-foreground mb-4">Explore JSDoc Sections</h2>
            <p className="text-muted-foreground text-lg mb-8">
              Choose a section to dive deeper into specific JSDoc features
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
            {navigationSections.map((section) => {
              const Icon = section.icon
              return (
                <Link key={section.id} href={section.href}>
                  <Card className="h-full hover:shadow-lg transition-all duration-300 hover:border-primary/50 hover:shadow-primary/5 cursor-pointer group">
                    <CardHeader className="text-center">
                      <div className="mx-auto mb-4 p-3 rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
                        <Icon className="h-8 w-8 text-primary" />
                      </div>
                      <CardTitle className="text-xl text-foreground group-hover:text-primary transition-colors">
                        {section.title}
                      </CardTitle>
                      <CardDescription className="text-muted-foreground">
                        {section.description}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="pt-0">
                      <Button variant="ghost" className="w-full group-hover:bg-primary/10 transition-colors">
                        Explore Section
                        <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                      </Button>
                    </CardContent>
                  </Card>
                </Link>
              )
            })}
          </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>
  )
}