"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Label } from "@/components/ui/label"
import { 
  Plus, 
  Trash2, 
  Settings, 
  Mail, 
  Send, 
  Download,
  Search,
  X,
  Check,
  ChevronRight,
  Edit,
  Copy
} from "lucide-react"

export function ComponentMatrix() {
  return (
    <TooltipProvider>
      <div className="space-y-10">
        {/* Buttons - All Variants */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Buttons — Variants
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Primary</p>
                <Button>Primary</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Secondary</p>
                <Button variant="secondary">Secondary</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Outline</p>
                <Button variant="outline">Outline</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Ghost</p>
                <Button variant="ghost">Ghost</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Link</p>
                <Button variant="link">Link</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Destructive</p>
                <Button variant="destructive">Destructive</Button>
              </div>
            </div>
          </div>
        </div>

        {/* Buttons - Sizes */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Buttons — Sizes
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex flex-wrap items-end gap-4">
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Small</p>
                <Button size="sm">Small</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Default</p>
                <Button size="default">Default</Button>
              </div>
              <div className="space-y-2">
                <p className="font-sans text-xs text-muted-foreground">Large</p>
                <Button size="lg">Large</Button>
              </div>
            </div>
          </div>
        </div>

        {/* Buttons - States */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Buttons — States
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="space-y-6">
              {/* Primary States */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Primary</p>
                <div className="flex flex-wrap gap-3">
                  <Button>Default</Button>
                  <Button className="bg-primary/90">Hover</Button>
                  <Button className="bg-primary/80">Active</Button>
                  <Button className="ring-2 ring-ring ring-offset-2">Focus</Button>
                  <Button disabled>Disabled</Button>
                </div>
              </div>
              {/* Outline States */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Outline</p>
                <div className="flex flex-wrap gap-3">
                  <Button variant="outline">Default</Button>
                  <Button variant="outline" className="bg-accent/10">Hover</Button>
                  <Button variant="outline" className="ring-2 ring-ring ring-offset-2 bg-transparent">Focus</Button>
                  <Button variant="outline" disabled>Disabled</Button>
                </div>
              </div>
              {/* Destructive States */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Destructive</p>
                <div className="flex flex-wrap gap-3">
                  <Button variant="destructive">Default</Button>
                  <Button variant="destructive" className="bg-destructive/90">Hover</Button>
                  <Button variant="destructive" className="ring-2 ring-destructive/50 ring-offset-2">Focus</Button>
                  <Button variant="destructive" disabled>Disabled</Button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Icon Buttons */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Icon Buttons
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="space-y-6">
              {/* By Variant */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Variants</p>
                <div className="flex flex-wrap gap-3">
                  <Button size="icon"><Plus className="h-4 w-4" /></Button>
                  <Button variant="secondary" size="icon"><Settings className="h-4 w-4" /></Button>
                  <Button variant="outline" size="icon"><Search className="h-4 w-4" /></Button>
                  <Button variant="ghost" size="icon"><X className="h-4 w-4" /></Button>
                  <Button variant="destructive" size="icon"><Trash2 className="h-4 w-4" /></Button>
                </div>
              </div>
              {/* By Size */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Sizes</p>
                <div className="flex flex-wrap items-center gap-3">
                  <Button size="icon-sm" variant="outline"><Plus className="h-4 w-4" /></Button>
                  <Button size="icon" variant="outline"><Plus className="h-4 w-4" /></Button>
                  <Button size="icon-lg" variant="outline"><Plus className="h-4 w-4" /></Button>
                </div>
              </div>
              {/* Disabled */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Disabled</p>
                <div className="flex flex-wrap gap-3">
                  <Button size="icon" disabled><Plus className="h-4 w-4" /></Button>
                  <Button variant="outline" size="icon" disabled><Settings className="h-4 w-4" /></Button>
                  <Button variant="ghost" size="icon" disabled><X className="h-4 w-4" /></Button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Buttons with Icons */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Buttons with Icons
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="space-y-6">
              {/* Leading Icons */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Leading Icon</p>
                <div className="flex flex-wrap gap-3">
                  <Button><Plus className="h-4 w-4" /> Create New</Button>
                  <Button variant="secondary"><Download className="h-4 w-4" /> Download</Button>
                  <Button variant="outline"><Mail className="h-4 w-4" /> Send Email</Button>
                  <Button variant="destructive"><Trash2 className="h-4 w-4" /> Delete</Button>
                </div>
              </div>
              {/* Trailing Icons */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Trailing Icon</p>
                <div className="flex flex-wrap gap-3">
                  <Button>Continue <ChevronRight className="h-4 w-4" /></Button>
                  <Button variant="outline">Next Step <ChevronRight className="h-4 w-4" /></Button>
                  <Button variant="secondary">Submit <Send className="h-4 w-4" /></Button>
                </div>
              </div>
              {/* Size Variations */}
              <div>
                <p className="font-sans text-xs text-muted-foreground mb-3">Sizes with Icons</p>
                <div className="flex flex-wrap items-center gap-3">
                  <Button size="sm"><Plus className="h-3.5 w-3.5" /> Small</Button>
                  <Button size="default"><Plus className="h-4 w-4" /> Default</Button>
                  <Button size="lg"><Plus className="h-5 w-5" /> Large</Button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Badges - Core Variants */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Badges — Core Variants
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex flex-wrap gap-3">
              <Badge>Default</Badge>
              <Badge variant="secondary">Secondary</Badge>
              <Badge variant="muted">Muted</Badge>
              <Badge variant="outline">Outline</Badge>
            </div>
          </div>
        </div>

        {/* Badges - Tag & Value */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Badges — Tag & Value
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex flex-wrap gap-3">
              <Badge variant="tag">Tag</Badge>
              <Badge variant="tag">Category</Badge>
              <Badge variant="value">42</Badge>
              <Badge variant="value">$1,234</Badge>
              <Badge variant="value">100%</Badge>
            </div>
          </div>
        </div>

        {/* Badges - Semantic */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Badges — Semantic
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex flex-wrap gap-3">
              <Badge variant="success">Success</Badge>
              <Badge variant="warning">Warning</Badge>
              <Badge variant="destructive">Danger</Badge>
              <Badge variant="info">Info</Badge>
            </div>
          </div>
        </div>

        {/* Badges - Channel Pills */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Badges — Channel Pills
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex flex-wrap gap-3">
              <Badge variant="whatsapp">WhatsApp</Badge>
              <Badge variant="email">Email</Badge>
              <Badge variant="telegram">Telegram</Badge>
              <Badge variant="zulip">Zulip</Badge>
              <Badge variant="platform">Platform</Badge>
            </div>
          </div>
        </div>

        {/* Badges on Muted Surface */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Badges — On Muted Surface
          </h4>
          <div className="border border-border rounded-md p-6 bg-muted">
            <div className="flex flex-wrap gap-3">
              <Badge>Default</Badge>
              <Badge variant="secondary">Secondary</Badge>
              <Badge variant="outline">Outline</Badge>
              <Badge variant="tag">Tag</Badge>
              <Badge variant="success">Success</Badge>
              <Badge variant="info">Info</Badge>
            </div>
          </div>
        </div>

        {/* Inputs */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Inputs
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">Default</p>
                <Input placeholder="Enter your email" />
              </div>
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">With Value</p>
                <Input defaultValue="user@greyhaven.ai" />
              </div>
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">Disabled</p>
                <Input placeholder="Disabled input" disabled />
              </div>
            </div>
            
            <div className="mt-6 pt-6 border-t border-border">
              <p className="font-sans text-xs text-muted-foreground mb-3">Textarea</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Textarea placeholder="Describe your project requirements..." />
                <Textarea placeholder="Disabled textarea" disabled />
              </div>
            </div>
          </div>
        </div>

        {/* Select */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Select
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">Default</p>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="Select an option" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="option1">Option 1</SelectItem>
                    <SelectItem value="option2">Option 2</SelectItem>
                    <SelectItem value="option3">Option 3</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">With Value</p>
                <Select defaultValue="option2">
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="option1">Option 1</SelectItem>
                    <SelectItem value="option2">Option 2</SelectItem>
                    <SelectItem value="option3">Option 3</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-3">
                <p className="font-sans text-xs text-muted-foreground">Disabled</p>
                <Select disabled>
                  <SelectTrigger>
                    <SelectValue placeholder="Disabled" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="option1">Option 1</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </div>

        {/* Checkboxes & Switches */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Checkboxes & Switches
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <p className="font-sans text-xs text-muted-foreground">Checkboxes</p>
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Checkbox id="check1" />
                    <Label htmlFor="check1" className="font-sans text-sm">Unchecked</Label>
                  </div>
                  <div className="flex items-center gap-2">
                    <Checkbox id="check2" defaultChecked />
                    <Label htmlFor="check2" className="font-sans text-sm">Checked</Label>
                  </div>
                  <div className="flex items-center gap-2">
                    <Checkbox id="check3" disabled />
                    <Label htmlFor="check3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
                  </div>
                </div>
              </div>
              
              <div className="space-y-4">
                <p className="font-sans text-xs text-muted-foreground">Switches</p>
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Switch id="switch1" />
                    <Label htmlFor="switch1" className="font-sans text-sm">Off</Label>
                  </div>
                  <div className="flex items-center gap-2">
                    <Switch id="switch2" defaultChecked />
                    <Label htmlFor="switch2" className="font-sans text-sm">On</Label>
                  </div>
                  <div className="flex items-center gap-2">
                    <Switch id="switch3" disabled />
                    <Label htmlFor="switch3" className="font-sans text-sm text-muted-foreground">Disabled</Label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Tabs
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <Tabs defaultValue="overview" className="w-full">
              <TabsList>
                <TabsTrigger value="overview">Overview</TabsTrigger>
                <TabsTrigger value="analytics">Analytics</TabsTrigger>
                <TabsTrigger value="settings">Settings</TabsTrigger>
                <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
              </TabsList>
              <TabsContent value="overview" className="mt-4">
                <p className="font-serif text-muted-foreground">
                  Overview content. This tab demonstrates the default active state.
                </p>
              </TabsContent>
              <TabsContent value="analytics" className="mt-4">
                <p className="font-serif text-muted-foreground">
                  Analytics content. System metrics and performance data.
                </p>
              </TabsContent>
              <TabsContent value="settings" className="mt-4">
                <p className="font-serif text-muted-foreground">
                  Settings content. Configuration options for your deployment.
                </p>
              </TabsContent>
            </Tabs>
          </div>
        </div>

        {/* Tooltips */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Tooltips
          </h4>
          <div className="border border-border rounded-md p-6 bg-card">
            <div className="flex gap-4">
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="outline">Hover me</Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p className="font-sans text-sm">This is a tooltip</p>
                </TooltipContent>
              </Tooltip>
              
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button variant="secondary">More info</Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p className="font-sans text-sm">Additional information appears here</p>
                </TooltipContent>
              </Tooltip>
            </div>
          </div>
        </div>
      </div>
    </TooltipProvider>
  )
}