"use client"

import { useState, useMemo } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Slider } from "@/components/ui/slider"
import { Search, ExternalLink, Check } from "lucide-react"
import Link from "next/link"

// All components data with preview components
const allComponents = [
  {
    id: "accordion",
    name: "Accordion",
    description: "Collapsible content sections",
    category: "Layout",
    preview: (
      <div className="space-y-2">
        <div className="border rounded p-2 bg-background">
          <div className="flex items-center justify-between text-sm">
            <span>Section 1</span>
            <span className="text-xs">▼</span>
          </div>
          <div className="text-xs text-muted-foreground mt-1">Content here...</div>
        </div>
        <div className="border rounded p-2 bg-muted/50">
          <div className="flex items-center justify-between text-sm">
            <span>Section 2</span>
            <span className="text-xs">▶</span>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: "alerts",
    name: "Alert",
    description: "Important messages and notifications",
    category: "Feedback",
    preview: (
      <div className="space-y-2">
        <div className="bg-blue-50 border border-blue-200 rounded p-2 flex items-center gap-2">
          <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
          <span className="text-xs text-blue-700">Info message</span>
        </div>
        <div className="bg-green-50 border border-green-200 rounded p-2 flex items-center gap-2">
          <Check className="w-3 h-3 text-green-600" />
          <span className="text-xs text-green-700">Success!</span>
        </div>
      </div>
    ),
  },
  {
    id: "alert-dialog",
    name: "Alert Dialog",
    description: "Modal dialogs for critical actions",
    category: "Overlay",
    preview: (
      <div className="relative">
        <div className="bg-background border rounded-lg p-3 shadow-lg">
          <div className="text-sm font-medium mb-1">Confirm Action</div>
          <div className="text-xs text-muted-foreground mb-3">Are you sure?</div>
          <div className="flex gap-2">
            <div className="bg-muted rounded px-2 py-1 text-xs">Cancel</div>
            <div className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs">Confirm</div>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: "avatars",
    name: "Avatar",
    description: "User profile pictures and placeholders",
    category: "Display",
    preview: (
      <div className="flex items-center gap-2">
        <Avatar className="w-8 h-8">
          <AvatarImage src="/avatar-woman-1.png" />
          <AvatarFallback className="text-xs">SM</AvatarFallback>
        </Avatar>
        <Avatar className="w-8 h-8">
          <AvatarImage src="/avatar-man-1.png" />
          <AvatarFallback className="text-xs">JD</AvatarFallback>
        </Avatar>
        <Avatar className="w-8 h-8">
          <AvatarFallback className="text-xs">+3</AvatarFallback>
        </Avatar>
      </div>
    ),
  },
  {
    id: "badges",
    name: "Badge",
    description: "Small status indicators and labels",
    category: "Display",
    preview: (
      <div className="flex flex-wrap gap-1">
        <Badge className="text-xs">New</Badge>
        <Badge variant="secondary" className="text-xs">
          Pro
        </Badge>
        <Badge variant="outline" className="text-xs">
          Beta
        </Badge>
        <Badge variant="destructive" className="text-xs">
          Error
        </Badge>
      </div>
    ),
  },
  {
    id: "breadcrumbs",
    name: "Breadcrumb",
    description: "Navigation hierarchy indicators",
    category: "Navigation",
    preview: (
      <div className="flex items-center gap-1 text-xs text-muted-foreground">
        <span>Home</span>
        <span>/</span>
        <span>Products</span>
        <span>/</span>
        <span className="text-foreground">Item</span>
      </div>
    ),
  },
  {
    id: "buttons",
    name: "Button",
    description: "Interactive elements for actions",
    category: "Input",
    preview: (
      <div className="flex gap-2">
        <Button size="sm" className="text-xs px-3 py-1">
          Primary
        </Button>
        <Button size="sm" variant="outline" className="text-xs px-3 py-1">
          Outline
        </Button>
        <Button size="sm" variant="secondary" className="text-xs px-3 py-1">
          Secondary
        </Button>
      </div>
    ),
  },
  {
    id: "calendar",
    name: "Calendar",
    description: "Date selection and display",
    category: "Input",
    preview: (
      <div className="bg-background border rounded p-2">
        <div className="text-xs font-medium mb-2 text-center">December 2024</div>
        <div className="grid grid-cols-7 gap-1">
          {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
            <div key={i} className="text-xs text-center text-muted-foreground">
              {day}
            </div>
          ))}
          {Array.from({ length: 14 }, (_, i) => (
            <div key={i} className="text-xs text-center p-1">
              {i < 7 ? "" : i - 6}
            </div>
          ))}
          <div className="text-xs text-center p-1 bg-primary text-primary-foreground rounded">15</div>
        </div>
      </div>
    ),
  },
  {
    id: "cards",
    name: "Card",
    description: "Flexible content containers",
    category: "Layout",
    preview: (
      <Card className="w-full">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Card Title</CardTitle>
          <CardDescription className="text-xs">Card description here</CardDescription>
        </CardHeader>
        <CardContent className="pt-0">
          <div className="text-xs text-muted-foreground">Content goes here...</div>
        </CardContent>
      </Card>
    ),
  },
  {
    id: "checkbox",
    name: "Checkbox",
    description: "Binary choice input controls",
    category: "Input",
    preview: (
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 border rounded bg-primary flex items-center justify-center">
            <Check className="w-3 h-3 text-primary-foreground" />
          </div>
          <span className="text-xs">Checked</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 border rounded bg-background"></div>
          <span className="text-xs">Unchecked</span>
        </div>
      </div>
    ),
  },
  {
    id: "collapsible",
    name: "Collapsible",
    description: "Expandable content sections",
    category: "Layout",
    preview: (
      <div className="space-y-2">
        <div className="flex items-center gap-2 text-sm">
          <span className="text-xs">▼</span>
          <span className="text-xs">Expandable Section</span>
        </div>
        <div className="ml-4 text-xs text-muted-foreground border-l pl-2">
          <div>Item 1</div>
          <div>Item 2</div>
          <div>Item 3</div>
        </div>
      </div>
    ),
  },
  {
    id: "combobox",
    name: "Combobox",
    description: "Searchable dropdown selections",
    category: "Input",
    preview: (
      <div className="relative">
        <div className="border rounded px-2 py-1 bg-background flex items-center justify-between">
          <span className="text-xs">Select option...</span>
          <span className="text-xs">▼</span>
        </div>
        <div className="absolute top-full left-0 right-0 mt-1 border rounded bg-background shadow-lg z-10">
          <div className="p-1 text-xs hover:bg-muted">Option 1</div>
          <div className="p-1 text-xs hover:bg-muted">Option 2</div>
        </div>
      </div>
    ),
  },
  {
    id: "command",
    name: "Command",
    description: "Command palette interface",
    category: "Navigation",
    preview: (
      <div className="bg-background border rounded-lg p-2 shadow-lg">
        <div className="flex items-center gap-2 mb-2">
          <Search className="w-3 h-3 text-muted-foreground" />
          <span className="text-xs text-muted-foreground">Type a command...</span>
        </div>
        <div className="space-y-1">
          <div className="text-xs p-1 bg-muted rounded">Create new file</div>
          <div className="text-xs p-1">Open settings</div>
          <div className="text-xs p-1">Search files</div>
        </div>
      </div>
    ),
  },
  {
    id: "context-menu",
    name: "Context Menu",
    description: "Right-click contextual menus",
    category: "Overlay",
    preview: (
      <div className="bg-background border rounded shadow-lg p-1">
        <div className="text-xs p-1 hover:bg-muted rounded">Copy</div>
        <div className="text-xs p-1 hover:bg-muted rounded">Paste</div>
        <div className="border-t my-1"></div>
        <div className="text-xs p-1 hover:bg-muted rounded text-destructive">Delete</div>
      </div>
    ),
  },
  {
    id: "dropdowns",
    name: "Dropdown",
    description: "Selection menus and options",
    category: "Input",
    preview: (
      <div className="relative">
        <Button size="sm" variant="outline" className="text-xs">
          Options ▼
        </Button>
        <div className="absolute top-full left-0 mt-1 bg-background border rounded shadow-lg p-1 z-10">
          <div className="text-xs p-1 hover:bg-muted rounded">Option 1</div>
          <div className="text-xs p-1 hover:bg-muted rounded">Option 2</div>
          <div className="text-xs p-1 hover:bg-muted rounded">Option 3</div>
        </div>
      </div>
    ),
  },
  {
    id: "forms",
    name: "Form",
    description: "Data input and validation",
    category: "Input",
    preview: (
      <div className="space-y-2">
        <div>
          <label className="text-xs font-medium">Email</label>
          <div className="border rounded px-2 py-1 bg-background">
            <span className="text-xs text-muted-foreground">Enter email...</span>
          </div>
        </div>
        <Button size="sm" className="text-xs w-full">
          Submit
        </Button>
      </div>
    ),
  },
  {
    id: "hover-card",
    name: "Hover Card",
    description: "Content preview on hover",
    category: "Overlay",
    preview: (
      <div className="relative">
        <span className="text-xs underline">@username</span>
        <div className="absolute top-full left-0 mt-1 bg-background border rounded shadow-lg p-2 z-10">
          <div className="flex items-center gap-2">
            <Avatar className="w-6 h-6">
              <AvatarFallback className="text-xs">U</AvatarFallback>
            </Avatar>
            <div>
              <div className="text-xs font-medium">Username</div>
              <div className="text-xs text-muted-foreground">Bio here...</div>
            </div>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: "label",
    name: "Label",
    description: "Form field labels and descriptions",
    category: "Input",
    preview: (
      <div className="space-y-1">
        <label className="text-xs font-medium">Field Label</label>
        <div className="border rounded px-2 py-1 bg-background">
          <span className="text-xs text-muted-foreground">Input field</span>
        </div>
        <div className="text-xs text-muted-foreground">Helper text</div>
      </div>
    ),
  },
  {
    id: "modals",
    name: "Modal",
    description: "Overlay dialogs and popups",
    category: "Overlay",
    preview: (
      <div className="relative">
        <div className="bg-background/80 absolute inset-0 flex items-center justify-center">
          <div className="bg-background border rounded-lg p-3 shadow-xl">
            <div className="text-sm font-medium mb-2">Modal Title</div>
            <div className="text-xs text-muted-foreground mb-3">Modal content goes here...</div>
            <div className="flex gap-2 justify-end">
              <Button size="sm" variant="outline" className="text-xs">
                Cancel
              </Button>
              <Button size="sm" className="text-xs">
                Save
              </Button>
            </div>
          </div>
        </div>
      </div>
    ),
  },
  {
    id: "pagination",
    name: "Pagination",
    description: "Navigate through pages of content",
    category: "Navigation",
    preview: (
      <div className="flex items-center gap-1">
        <Button size="sm" variant="outline" className="text-xs px-2 py-1">
          ←
        </Button>
        <Button size="sm" className="text-xs px-2 py-1">
          1
        </Button>
        <Button size="sm" variant="outline" className="text-xs px-2 py-1">
          2
        </Button>
        <Button size="sm" variant="outline" className="text-xs px-2 py-1">
          3
        </Button>
        <Button size="sm" variant="outline" className="text-xs px-2 py-1">
          →
        </Button>
      </div>
    ),
  },
  {
    id: "progress",
    name: "Progress",
    description: "Task completion indicators",
    category: "Feedback",
    preview: (
      <div className="space-y-2">
        <div className="text-xs">Loading... 65%</div>
        <Progress value={65} className="h-2" />
        <div className="text-xs text-muted-foreground">Processing files</div>
      </div>
    ),
  },
  {
    id: "scroll-area",
    name: "Scroll Area",
    description: "Custom scrollable containers",
    category: "Layout",
    preview: (
      <div className="border rounded h-16 overflow-hidden relative">
        <div className="p-2 space-y-1">
          <div className="text-xs">Item 1</div>
          <div className="text-xs">Item 2</div>
          <div className="text-xs">Item 3</div>
          <div className="text-xs">Item 4</div>
          <div className="text-xs">Item 5</div>
        </div>
        <div className="absolute right-1 top-1 bottom-1 w-1 bg-muted rounded"></div>
        <div className="absolute right-1 top-1 w-1 h-4 bg-muted-foreground rounded"></div>
      </div>
    ),
  },
  {
    id: "sheet",
    name: "Sheet",
    description: "Slide-out panels and drawers",
    category: "Overlay",
    preview: (
      <div className="relative overflow-hidden">
        <div className="bg-muted/50 h-16 rounded"></div>
        <div className="absolute right-0 top-0 bottom-0 w-2/3 bg-background border-l shadow-lg p-2">
          <div className="text-xs font-medium mb-2">Sheet Title</div>
          <div className="text-xs text-muted-foreground">Content here...</div>
        </div>
      </div>
    ),
  },
  {
    id: "sidebar",
    name: "Sidebar",
    description: "Navigation and content panels",
    category: "Layout",
    preview: (
      <div className="flex h-16 rounded overflow-hidden border">
        <div className="w-1/3 bg-muted p-2">
          <div className="text-xs font-medium mb-1">Menu</div>
          <div className="space-y-1">
            <div className="text-xs bg-primary text-primary-foreground rounded px-1">Home</div>
            <div className="text-xs px-1">About</div>
            <div className="text-xs px-1">Contact</div>
          </div>
        </div>
        <div className="flex-1 p-2 bg-background">
          <div className="text-xs text-muted-foreground">Main content area</div>
        </div>
      </div>
    ),
  },
  {
    id: "skeleton",
    name: "Skeleton",
    description: "Loading state placeholders",
    category: "Feedback",
    preview: (
      <div className="space-y-2">
        <div className="h-3 bg-muted rounded animate-pulse"></div>
        <div className="h-3 bg-muted rounded animate-pulse w-3/4"></div>
        <div className="h-3 bg-muted rounded animate-pulse w-1/2"></div>
      </div>
    ),
  },
  {
    id: "slider",
    name: "Slider",
    description: "Range input controls",
    category: "Input",
    preview: (
      <div className="space-y-2">
        <div className="text-xs">Volume: 65%</div>
        <Slider value={[65]} className="w-full" />
      </div>
    ),
  },
  {
    id: "switch",
    name: "Switch",
    description: "Toggle controls for binary states",
    category: "Input",
    preview: (
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <Switch checked={true} />
          <span className="text-xs">Enabled</span>
        </div>
        <div className="flex items-center gap-2">
          <Switch checked={false} />
          <span className="text-xs">Disabled</span>
        </div>
      </div>
    ),
  },
  {
    id: "tabs",
    name: "Tab",
    description: "Organize content in tabbed interfaces",
    category: "Navigation",
    preview: (
      <div>
        <div className="flex border-b">
          <div className="px-2 py-1 text-xs border-b-2 border-primary">Tab 1</div>
          <div className="px-2 py-1 text-xs text-muted-foreground">Tab 2</div>
          <div className="px-2 py-1 text-xs text-muted-foreground">Tab 3</div>
        </div>
        <div className="p-2 text-xs text-muted-foreground">Tab content here...</div>
      </div>
    ),
  },
  {
    id: "tables",
    name: "Table",
    description: "Structured data display",
    category: "Display",
    preview: (
      <div className="border rounded overflow-hidden">
        <div className="bg-muted px-2 py-1 text-xs font-medium border-b">Name | Status</div>
        <div className="px-2 py-1 text-xs border-b">John | Active</div>
        <div className="px-2 py-1 text-xs border-b">Jane | Pending</div>
        <div className="px-2 py-1 text-xs">Bob | Inactive</div>
      </div>
    ),
  },
  {
    id: "top-navigation",
    name: "Top Navigation",
    description: "Header navigation bars",
    category: "Navigation",
    preview: (
      <div className="border rounded bg-background p-2">
        <div className="flex items-center justify-between">
          <div className="text-xs font-medium">Logo</div>
          <div className="flex gap-2">
            <div className="text-xs">Home</div>
            <div className="text-xs">About</div>
            <div className="text-xs">Contact</div>
          </div>
          <Avatar className="w-6 h-6">
            <AvatarFallback className="text-xs">U</AvatarFallback>
          </Avatar>
        </div>
      </div>
    ),
  },
  {
    id: "tooltips",
    name: "Tooltip",
    description: "Contextual help and information",
    category: "Overlay",
    preview: (
      <div className="relative">
        <Button size="sm" variant="outline" className="text-xs">
          Hover me
        </Button>
        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 bg-foreground text-background text-xs px-2 py-1 rounded">
          Tooltip text
          <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-foreground"></div>
        </div>
      </div>
    ),
  },
]

const categories = ["All", "Input", "Display", "Layout", "Navigation", "Overlay", "Feedback"]

export function ComponentsGallerySection() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All")

  const filteredComponents = useMemo(() => {
    return allComponents.filter((component) => {
      const matchesSearch =
        component.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        component.description.toLowerCase().includes(searchTerm.toLowerCase())
      const matchesCategory = selectedCategory === "All" || component.category === selectedCategory
      return matchesSearch && matchesCategory
    })
  }, [searchTerm, selectedCategory])

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="space-y-4">
        <div>
          <h1 className="text-4xl font-bold tracking-tight mb-4">Components</h1>
          <p className="text-lg text-muted-foreground max-w-3xl">
            A comprehensive collection of reusable UI components built with React, TypeScript, and Tailwind CSS. Each
            component is designed with accessibility, customization, and developer experience in mind.
          </p>
        </div>

        {/* Search and Filter */}
        <div className="flex flex-col sm:flex-row gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
            <Input
              placeholder="Search components..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>
          <div className="flex gap-2 flex-wrap">
            {categories.map((category) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedCategory(category)}
              >
                {category}
              </Button>
            ))}
          </div>
        </div>
      </div>

      {/* Results count */}
      <div className="text-sm text-muted-foreground">
        {filteredComponents.length} component{filteredComponents.length !== 1 ? "s" : ""} found
      </div>

      {/* Components Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredComponents.map((component) => (
          <Link key={component.id} href={`/${component.id}`} className="group">
            <Card className="h-full hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between mb-3">
                  <div className="space-y-1">
                    <CardTitle className="text-lg group-hover:text-primary transition-colors">
                      {component.name}
                    </CardTitle>
                    <Badge variant="secondary" className="text-xs">
                      {component.category}
                    </Badge>
                  </div>
                  <ExternalLink className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>

                {/* Component Preview */}
                <div className="bg-muted/30 rounded-lg p-4 min-h-[80px] flex items-center justify-center">
                  {component.preview}
                </div>
              </CardHeader>
              <CardContent className="pt-0">
                <CardDescription className="text-sm">{component.description}</CardDescription>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>

      {/* No results */}
      {filteredComponents.length === 0 && (
        <div className="text-center py-12">
          <div className="text-muted-foreground mb-4">
            <Search className="h-12 w-12 mx-auto mb-4 opacity-50" />
            <p className="text-lg font-medium">No components found</p>
            <p className="text-sm">Try adjusting your search or filter criteria</p>
          </div>
          <Button
            variant="outline"
            onClick={() => {
              setSearchTerm("")
              setSelectedCategory("All")
            }}
          >
            Clear filters
          </Button>
        </div>
      )}
    </div>
  )
}