"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-16">
        {/* Typography Audit - Slide 22 */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Typography Audit — Slide 22
          </h4>
          <div className="border-institutional border-border rounded-sm p-12 bg-brand-offwhite institutional-grid space-y-8">
            <div className="space-y-1">
              <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">Display Title (150px)</span>
              <h1 className="text-display leading-none">Modular Systems</h1>
            </div>
            
            <div className="space-y-1">
              <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H1 Headline (100px)</span>
              <h1 className="text-h1 leading-none">Sovereign AI Systems</h1>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8 border-t border-border">
              <div className="space-y-2">
                <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H2 Section (75px)</span>
                <h2 className="text-h2 leading-tight">Institutional Architecture</h2>
              </div>
              <div className="space-y-2">
                <span className="text-[10px] font-sans text-muted-foreground uppercase tracking-widest">H3 Label (60px)</span>
                <h3 className="text-h3 leading-tight">Functional Design</h3>
              </div>
            </div>
          </div>
        </div>

        {/* Key Visual - Slide 26 */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Key Visual Composition — Slide 26
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-0 border-institutional border-border rounded-sm overflow-hidden min-h-[500px]">
            <div className="p-12 bg-brand-offwhite flex flex-col justify-center space-y-6">
              <h2 className="text-h1 leading-[0.9] max-w-md">Key visual: structures built from base geometry</h2>
              <div className="space-y-4 text-muted-foreground max-w-sm">
                <p className="text-body-lg font-serif">Greyhaven's key visual is constructed from a modular system derived from the same underlying geometry as the logo.</p>
                <div className="pt-4 space-y-2">
                  <div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
                    <span className="w-1.5 h-1.5 bg-brand-orange"></span> Modular Stacking
                  </div>
                  <div className="flex gap-2 text-xs font-sans items-center uppercase tracking-wider">
                    <span className="w-1.5 h-1.5 bg-brand-orange"></span> Hexagonal Logic
                  </div>
                </div>
              </div>
            </div>
            <div className="bg-brand-black relative flex items-center justify-center p-12">
              <div className="absolute inset-0 institutional-grid opacity-20"></div>
              <img 
                src="/brand/modular-geometry.png" 
                alt="Modular Geometry" 
                className="relative z-10 object-contain w-full h-full scale-110"
              />
              <div className="absolute left-6 top-6 bottom-6 w-[2px] bg-brand-orange/50"></div>
            </div>
          </div>
        </div>

        {/* Brand Identity Integration */}
        <div>
          <h4 className="font-sans text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4">
            Institutional Brand Integration
          </h4>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Modular Geometry Showcase */}
            <div className="border-institutional border-border rounded-sm p-10 bg-[#F9F9F7] institutional-accent overflow-hidden relative min-h-[350px] flex flex-col justify-end">
              <div className="absolute top-4 right-4 bottom-4 w-1/2 opacity-80">
                <img 
                  src="/brand/modular-geometry.png" 
                  alt="Modular Geometry" 
                  className="object-contain object-right h-full w-full"
                />
              </div>
              <div className="relative z-10 space-y-4">
                <Badge className="bg-brand-orange text-white border-0 rounded-none text-[10px] uppercase tracking-widest px-2 py-0.5">Structural</Badge>
                <h3 className="text-display text-5xl leading-[0.9] text-brand-offblack">Modular<br />Core</h3>
                <p className="text-sm text-brand-grey7 max-w-[220px] font-sans">
                  Leveraging architectural logic through 3D modular geometry.
                </p>
              </div>
            </div>

            {/* Prompt A & B Treatments */}
            <div className="space-y-6">
              <div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-offwhite text-brand-offblack flex flex-col">
                <div className="aspect-[4/3] flex items-center justify-center overflow-hidden grayscale hover:grayscale-0 transition-all duration-500">
                  <img src="/brand/briefcase-lineart.png" alt="Lineart" className="w-full h-full object-cover" />
                </div>
                <div className="p-6">
                  <h5 className="font-sans text-xs font-bold uppercase tracking-widest text-brand-orange mb-1">Prompt A</h5>
                  <h4 className="text-body-lg font-serif mb-1">Institutional Lineart</h4>
                  <p className="text-xs text-brand-grey7">High-contrast structural lineart defined for documentation visuals.</p>
                </div>
              </div>
              
              <div className="border-institutional border-border rounded-sm overflow-hidden bg-brand-black text-brand-offwhite flex flex-col">
                <div className="aspect-[4/3] flex items-center justify-center overflow-hidden">
                  <img src="/brand/briefcase-silhouette.png" alt="Silhouette" className="w-full h-full object-cover" />
                </div>
                <div className="p-6">
                  <h5 className="font-sans text-xs font-bold uppercase tracking-widest text-[#D95E2A] mb-1">Prompt B</h5>
                  <h4 className="text-body-lg font-serif mb-1 italic">High-Contrast Silhouette</h4>
                  <p className="text-xs text-zinc-400">Bold graphic silhouettes used for high-impact social and poster assets.</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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-institutional border-border rounded-sm 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>
  )
}