'use client'

import React from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import CustomSyntaxHighlighter from "@/components/SyntaxHighlighter"
import { ExternalLink } from "lucide-react"

interface Source {
  name: string
  url: string
  description: string
}

interface JSDocItem {
  tag: string
  syntax: string
  example: string
  description: string
  sources?: Source[]
}

interface JSDocSection {
  title: string
  description: string
  items: JSDocItem[]
}

interface ContentProps {
  activeSection: string
  jsdocData: Record<string, JSDocSection>
}

export default function Content({ activeSection, jsdocData }: ContentProps) {
  const currentSection = jsdocData[activeSection]

  return (
    <main className="flex-1 min-w-0 ml-60">
      <div className="space-y-6">
        {/* Kitchen Sink Example */}
        {activeSection === 'kitchen-sink' && (
          <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 shadow-lg">
            <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>
              <CustomSyntaxHighlighter code={currentSection?.items[0]?.example || ''} />
            </CardContent>
          </Card>
        )}

        {/* Section Header */}
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-foreground mb-2">
            {currentSection?.title || "Section"}
          </h2>
          <p className="text-muted-foreground text-lg">
            {currentSection?.description || "Documentation section"}
          </p>
        </div>

        {/* Content Cards */}
        <div className="grid gap-6" id={`section-${activeSection}`}>
          {currentSection?.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>
                  <CustomSyntaxHighlighter code={item.example} />
                </div>

                {/* Source Links */}
                {item.sources && item.sources.length > 0 && (
                  <>
                    <Separator />
                    <div>
                      <h4 className="font-semibold text-foreground mb-2">Sources & References:</h4>
                      <div className="space-y-2">
                        {item.sources.map((source, sourceIndex) => (
                          <div key={sourceIndex} className="flex items-start gap-2 p-2 bg-muted/50 rounded-md">
                            <ExternalLink className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
                            <div className="flex-1 min-w-0">
                              <a
                                href={source.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="text-primary hover:underline font-medium"
                              >
                                {source.name}
                              </a>
                              <p className="text-sm text-muted-foreground mt-1">{source.description}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </>
                )}
              </CardContent>
            </Card>
          )) || []}
        </div>
      </div>
    </main>
  )
}