/**
 * UI Elements Showcase Page
 * 
 * Single source of truth for all UI components from components/ui/
 * This page is non-indexable and serves as documentation/reference
 * 
 * Route: /ui-elements
 */
import React, { useState } from 'react';
import PageMeta from '../components/common/PageMeta';

// ============================================================================
// UI COMPONENTS - All imports from components/ui/ (SINGLE SOURCE OF TRUTH)
// ============================================================================

// Accordion
import { Accordion, AccordionItem } from '../components/ui/accordion/Accordion';

// Alert
import Alert from '../components/ui/alert/Alert';
import AlertModal from '../components/ui/alert/AlertModal';

// Avatar
import Avatar from '../components/ui/avatar/Avatar';

// Badge
import Badge from '../components/ui/badge/Badge';

// Breadcrumb
import { Breadcrumb } from '../components/ui/breadcrumb/Breadcrumb';

// Button
import Button from '../components/ui/button/Button';
import ButtonWithTooltip from '../components/ui/button/ButtonWithTooltip';
import IconButton from '../components/ui/button/IconButton';

// Button Group
import { ButtonGroup, ButtonGroupItem } from '../components/ui/button-group/ButtonGroup';

// Card
import { Card, CardImage, CardTitle, CardContent, CardDescription, CardAction, CardIcon, HorizontalCard } from '../components/ui/card/Card';

// DataView
import { DataView, DataViewHeader, DataViewToolbar, DataViewEmptyState } from '../components/ui/dataview/DataView';

// Dropdown
import { Dropdown } from '../components/ui/dropdown/Dropdown';
import { DropdownItem } from '../components/ui/dropdown/DropdownItem';

// List
import { List, ListItem, ListDot, ListIcon, ListCheckboxItem, ListRadioItem } from '../components/ui/list/List';

// Modal
import { Modal } from '../components/ui/modal';

// Pagination
import { Pagination } from '../components/ui/pagination/Pagination';
import { CompactPagination } from '../components/ui/pagination/CompactPagination';

// Progress
import { ProgressBar } from '../components/ui/progress/ProgressBar';

// Ribbon
import { Ribbon } from '../components/ui/ribbon/Ribbon';

// Spinner
import { Spinner } from '../components/ui/spinner/Spinner';

// Table
import { Table, TableHeader, TableBody, TableRow, TableCell } from '../components/ui/table';

// Tabs
import { Tabs, TabList, Tab, TabPanel } from '../components/ui/tabs/Tabs';

// Toast
import { useToast } from '../components/ui/toast/ToastContainer';

// Tooltip
import { Tooltip } from '../components/ui/tooltip/Tooltip';
import { EnhancedTooltip } from '../components/ui/tooltip/EnhancedTooltip';

// Icons for demos
import { 
  CheckCircleIcon, 
  CloseIcon, 
  PlusIcon, 
  ArrowRightIcon,
  GridIcon,
  FileIcon,
  BoltIcon,
} from '../icons';

// Component categories for navigation
const CATEGORIES = [
  { id: 'buttons', label: 'Buttons' },
  { id: 'badges', label: 'Badges' },
  { id: 'cards', label: 'Cards' },
  { id: 'alerts', label: 'Alerts' },
  { id: 'modals', label: 'Modals' },
  { id: 'tables', label: 'Tables' },
  { id: 'tabs', label: 'Tabs' },
  { id: 'accordion', label: 'Accordion' },
  { id: 'dropdown', label: 'Dropdown' },
  { id: 'pagination', label: 'Pagination' },
  { id: 'progress', label: 'Progress' },
  { id: 'spinner', label: 'Spinner' },
  { id: 'avatar', label: 'Avatar' },
  { id: 'breadcrumb', label: 'Breadcrumb' },
  { id: 'list', label: 'List' },
  { id: 'tooltip', label: 'Tooltip' },
  { id: 'ribbon', label: 'Ribbon' },
  { id: 'toast', label: 'Toast' },
  { id: 'dataview', label: 'DataView' },
];

// Section wrapper component
function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
  return (
    <section id={id} className="mb-12 scroll-mt-24">
      <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 pb-2 border-b border-gray-200 dark:border-gray-700">
        {title}
      </h2>
      <div className="space-y-6">
        {children}
      </div>
    </section>
  );
}

// Demo box component
function DemoBox({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
      <p className="text-xs font-mono text-gray-500 dark:text-gray-400 mb-3">{label}</p>
      <div className="flex flex-wrap items-center gap-3">
        {children}
      </div>
    </div>
  );
}

export default function UIElements() {
  const toast = useToast();
  
  // Modal states
  const [showModal, setShowModal] = useState(false);
  const [showAlertModal, setShowAlertModal] = useState(false);
  
  // Dropdown state
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const dropdownRef = React.useRef<HTMLButtonElement>(null);
  
  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  
  // Tabs state
  const [activeTab, setActiveTab] = useState('tab1');
  
  // List state
  const [checkboxChecked, setCheckboxChecked] = useState(false);
  const [radioValue, setRadioValue] = useState('option1');
  
  // Button group state
  const [activeButton, setActiveButton] = useState(0);

  return (
    <>
      <PageMeta
        title="UI Elements | IGNY8 Design System"
        description="Component library reference - Single source of truth for all UI components"
        noIndex={true}
      />
      
      <div className="flex gap-8">
        {/* Sticky Navigation */}
        <nav className="hidden lg:block w-48 shrink-0">
          <div className="sticky top-24 space-y-1">
            <h3 className="font-semibold text-gray-900 dark:text-white mb-3">Components</h3>
            {CATEGORIES.map(cat => (
              <a
                key={cat.id}
                href={`#${cat.id}`}
                className="block py-1.5 px-3 text-sm text-gray-600 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
              >
                {cat.label}
              </a>
            ))}
          </div>
        </nav>
        
        {/* Main Content */}
        <div className="flex-1 min-w-0">
          <div className="mb-8">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
              UI Elements Library
            </h1>
            <p className="text-gray-600 dark:text-gray-400">
              Single source of truth for all UI components. All components are imported from <code className="text-sm bg-gray-100 dark:bg-gray-800 px-1 rounded">components/ui/</code>
            </p>
          </div>

          {/* ================================================================ */}
          {/* BUTTONS */}
          {/* ================================================================ */}
          <Section id="buttons" title="Button">
            <DemoBox label="variants: primary | secondary | outline | ghost | gradient">
              <Button variant="primary">Primary</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="gradient">Gradient</Button>
            </DemoBox>
            
            <DemoBox label="tones: brand | success | warning | danger | neutral">
              <Button tone="brand">Brand</Button>
              <Button tone="success">Success</Button>
              <Button tone="warning">Warning</Button>
              <Button tone="danger">Danger</Button>
              <Button tone="neutral">Neutral</Button>
            </DemoBox>
            
            <DemoBox label="sizes: xs | sm | md | lg | xl | 2xl">
              <Button size="xs">XS</Button>
              <Button size="sm">SM</Button>
              <Button size="md">MD</Button>
              <Button size="lg">LG</Button>
              <Button size="xl">XL</Button>
            </DemoBox>
            
            <DemoBox label="shapes: rounded | pill">
              <Button shape="rounded">Rounded</Button>
              <Button shape="pill">Pill</Button>
            </DemoBox>
            
            <DemoBox label="with icons: startIcon | endIcon">
              <Button startIcon={<PlusIcon className="w-4 h-4" />}>Add Item</Button>
              <Button endIcon={<ArrowRightIcon className="w-4 h-4" />}>Continue</Button>
            </DemoBox>
            
            <DemoBox label="states: disabled | fullWidth">
              <Button disabled>Disabled</Button>
            </DemoBox>
            
            <DemoBox label="ButtonWithTooltip (shows tooltip when disabled)">
              <ButtonWithTooltip disabled tooltip="This action is not available">
                Disabled with Tooltip
              </ButtonWithTooltip>
            </DemoBox>
            
            <DemoBox label="ButtonGroup">
              <ButtonGroup>
                <ButtonGroupItem isActive={activeButton === 0} onClick={() => setActiveButton(0)}>Day</ButtonGroupItem>
                <ButtonGroupItem isActive={activeButton === 1} onClick={() => setActiveButton(1)}>Week</ButtonGroupItem>
                <ButtonGroupItem isActive={activeButton === 2} onClick={() => setActiveButton(2)}>Month</ButtonGroupItem>
              </ButtonGroup>
            </DemoBox>
            
            <DemoBox label="IconButton - variants: solid | outline | ghost">
              <IconButton icon={<PlusIcon />} variant="solid" tone="brand" title="Add" />
              <IconButton icon={<PlusIcon />} variant="outline" tone="brand" title="Add" />
              <IconButton icon={<PlusIcon />} variant="ghost" tone="brand" title="Add" />
            </DemoBox>
            
            <DemoBox label="IconButton - sizes: xs | sm | md | lg">
              <IconButton icon={<CloseIcon />} size="xs" title="Close" />
              <IconButton icon={<CloseIcon />} size="sm" title="Close" />
              <IconButton icon={<CloseIcon />} size="md" title="Close" />
              <IconButton icon={<CloseIcon />} size="lg" title="Close" />
            </DemoBox>
            
            <DemoBox label="IconButton - shapes: rounded | circle">
              <IconButton icon={<CheckCircleIcon />} shape="rounded" variant="solid" tone="success" title="Approve" />
              <IconButton icon={<CheckCircleIcon />} shape="circle" variant="solid" tone="success" title="Approve" />
            </DemoBox>
            
            <DemoBox label="IconButton - tones">
              <IconButton icon={<BoltIcon />} variant="ghost" tone="brand" title="Brand" />
              <IconButton icon={<BoltIcon />} variant="ghost" tone="success" title="Success" />
              <IconButton icon={<BoltIcon />} variant="ghost" tone="warning" title="Warning" />
              <IconButton icon={<BoltIcon />} variant="ghost" tone="danger" title="Danger" />
              <IconButton icon={<BoltIcon />} variant="ghost" tone="neutral" title="Neutral" />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* BADGES */}
          {/* ================================================================ */}
          <Section id="badges" title="Badge">
            <DemoBox label="variants: solid | soft | outline | light">
              <Badge variant="solid" tone="brand">Solid</Badge>
              <Badge variant="soft" tone="brand">Soft</Badge>
              <Badge variant="outline" tone="brand">Outline</Badge>
              <Badge variant="light" tone="brand">Light</Badge>
            </DemoBox>
            
            <DemoBox label="tones: brand | success | warning | danger | info | neutral">
              <Badge tone="brand">Brand</Badge>
              <Badge tone="success">Success</Badge>
              <Badge tone="warning">Warning</Badge>
              <Badge tone="danger">Danger</Badge>
              <Badge tone="info">Info</Badge>
              <Badge tone="neutral">Neutral</Badge>
            </DemoBox>
            
            <DemoBox label="sizes: xs | sm | md">
              <Badge size="xs">XS</Badge>
              <Badge size="sm">SM</Badge>
              <Badge size="md">MD</Badge>
            </DemoBox>
            
            <DemoBox label="with icons: startIcon | endIcon">
              <Badge startIcon={<CheckCircleIcon className="w-3 h-3" />} tone="success">Completed</Badge>
              <Badge endIcon={<CloseIcon className="w-3 h-3" />} tone="danger">Remove</Badge>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* CARDS */}
          {/* ================================================================ */}
          <Section id="cards" title="Card">
            <DemoBox label="variants: surface | panel | frosted | borderless | gradient">
              <Card variant="surface" className="w-48">
                <CardContent>Surface Card</CardContent>
              </Card>
              <Card variant="panel" className="w-48">
                <CardContent>Panel Card</CardContent>
              </Card>
            </DemoBox>
            
            <DemoBox label="padding: none | sm | md | lg">
              <Card padding="sm" className="w-48">
                <CardContent>Small Padding</CardContent>
              </Card>
              <Card padding="lg" className="w-48">
                <CardContent>Large Padding</CardContent>
              </Card>
            </DemoBox>
            
            <DemoBox label="Card with components">
              <Card className="w-64">
                <CardIcon><FileIcon className="w-8 h-8 text-brand-500" /></CardIcon>
                <CardTitle>Card Title</CardTitle>
                <CardDescription>Card description text goes here</CardDescription>
                <CardAction>View More</CardAction>
              </Card>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* ALERTS */}
          {/* ================================================================ */}
          <Section id="alerts" title="Alert">
            <DemoBox label="variants: success | error | warning | info">
              <div className="space-y-3 w-full">
                <Alert variant="success" title="Success" message="Operation completed successfully!" />
                <Alert variant="error" title="Error" message="Something went wrong. Please try again." />
                <Alert variant="warning" title="Warning" message="Please review before continuing." />
                <Alert variant="info" title="Info" message="Here's some useful information." />
              </div>
            </DemoBox>
            
            <DemoBox label="AlertModal">
              <Button onClick={() => setShowAlertModal(true)}>Open Alert Modal</Button>
              <AlertModal
                isOpen={showAlertModal}
                onClose={() => setShowAlertModal(false)}
                variant="warning"
                title="Confirm Action"
                message="Are you sure you want to proceed?"
                isConfirmation={true}
                onConfirm={() => setShowAlertModal(false)}
              />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* MODALS */}
          {/* ================================================================ */}
          <Section id="modals" title="Modal">
            <DemoBox label="Basic Modal">
              <Button onClick={() => setShowModal(true)}>Open Modal</Button>
              <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
                <div className="p-6">
                  <h3 className="text-lg font-semibold mb-4">Modal Title</h3>
                  <p className="text-gray-600 dark:text-gray-400 mb-4">
                    This is modal content. You can put any React components here.
                  </p>
                  <div className="flex justify-end gap-3">
                    <Button variant="outline" onClick={() => setShowModal(false)}>Cancel</Button>
                    <Button onClick={() => setShowModal(false)}>Confirm</Button>
                  </div>
                </div>
              </Modal>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* TABLES */}
          {/* ================================================================ */}
          <Section id="tables" title="Table">
            <DemoBox label="Table components">
              <Table className="w-full">
                <TableHeader>
                  <TableRow>
                    <TableCell isHeader>Name</TableCell>
                    <TableCell isHeader>Status</TableCell>
                    <TableCell isHeader>Date</TableCell>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell>Item One</TableCell>
                    <TableCell><Badge tone="success">Active</Badge></TableCell>
                    <TableCell>Jan 1, 2024</TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell>Item Two</TableCell>
                    <TableCell><Badge tone="warning">Pending</Badge></TableCell>
                    <TableCell>Jan 2, 2024</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* TABS */}
          {/* ================================================================ */}
          <Section id="tabs" title="Tabs">
            <DemoBox label="Tabs component">
              <div className="w-full">
                <Tabs defaultTab="tab1" onChange={setActiveTab}>
                  <TabList>
                    <Tab tabId="tab1">Tab One</Tab>
                    <Tab tabId="tab2">Tab Two</Tab>
                    <Tab tabId="tab3">Tab Three</Tab>
                  </TabList>
                  <TabPanel tabId="tab1">
                    <div className="py-4">Content for Tab One</div>
                  </TabPanel>
                  <TabPanel tabId="tab2">
                    <div className="py-4">Content for Tab Two</div>
                  </TabPanel>
                  <TabPanel tabId="tab3">
                    <div className="py-4">Content for Tab Three</div>
                  </TabPanel>
                </Tabs>
              </div>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* ACCORDION */}
          {/* ================================================================ */}
          <Section id="accordion" title="Accordion">
            <DemoBox label="Accordion component">
              <div className="w-full">
                <Accordion>
                  <AccordionItem title="Section One" defaultOpen>
                    Content for section one goes here.
                  </AccordionItem>
                  <AccordionItem title="Section Two">
                    Content for section two goes here.
                  </AccordionItem>
                  <AccordionItem title="Section Three">
                    Content for section three goes here.
                  </AccordionItem>
                </Accordion>
              </div>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* DROPDOWN */}
          {/* ================================================================ */}
          <Section id="dropdown" title="Dropdown">
            <DemoBox label="Dropdown component">
              <div className="relative">
                <Button ref={dropdownRef} onClick={() => setDropdownOpen(!dropdownOpen)}>
                  Open Dropdown
                </Button>
                <Dropdown 
                  isOpen={dropdownOpen} 
                  onClose={() => setDropdownOpen(false)}
                  anchorRef={dropdownRef}
                >
                  <DropdownItem onClick={() => setDropdownOpen(false)}>Option One</DropdownItem>
                  <DropdownItem onClick={() => setDropdownOpen(false)}>Option Two</DropdownItem>
                  <DropdownItem onClick={() => setDropdownOpen(false)}>Option Three</DropdownItem>
                </Dropdown>
              </div>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* PAGINATION */}
          {/* ================================================================ */}
          <Section id="pagination" title="Pagination">
            <DemoBox label="Pagination variants">
              <Pagination 
                currentPage={currentPage} 
                totalPages={10} 
                onPageChange={setCurrentPage}
                variant="text"
              />
            </DemoBox>
            
            <DemoBox label="CompactPagination (with page size)">
              <CompactPagination
                currentPage={currentPage}
                totalPages={10}
                pageSize={pageSize}
                onPageChange={setCurrentPage}
                onPageSizeChange={setPageSize}
              />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* PROGRESS */}
          {/* ================================================================ */}
          <Section id="progress" title="Progress">
            <DemoBox label="ProgressBar colors">
              <div className="space-y-3 w-full">
                <ProgressBar value={75} color="primary" showLabel />
                <ProgressBar value={60} color="success" showLabel />
                <ProgressBar value={45} color="warning" showLabel />
                <ProgressBar value={30} color="error" showLabel />
              </div>
            </DemoBox>
            
            <DemoBox label="ProgressBar sizes: sm | md | lg">
              <div className="space-y-3 w-full">
                <ProgressBar value={50} size="sm" />
                <ProgressBar value={50} size="md" />
                <ProgressBar value={50} size="lg" />
              </div>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* SPINNER */}
          {/* ================================================================ */}
          <Section id="spinner" title="Spinner">
            <DemoBox label="sizes: sm | md | lg">
              <Spinner size="sm" />
              <Spinner size="md" />
              <Spinner size="lg" />
            </DemoBox>
            
            <DemoBox label="colors: primary | success | error | warning | info">
              <Spinner color="primary" />
              <Spinner color="success" />
              <Spinner color="error" />
              <Spinner color="warning" />
              <Spinner color="info" />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* AVATAR */}
          {/* ================================================================ */}
          <Section id="avatar" title="Avatar">
            <DemoBox label="sizes: xsmall | small | medium | large | xlarge | xxlarge">
              <Avatar src="/images/user/user-01.jpg" size="xsmall" />
              <Avatar src="/images/user/user-01.jpg" size="small" />
              <Avatar src="/images/user/user-01.jpg" size="medium" />
              <Avatar src="/images/user/user-01.jpg" size="large" />
              <Avatar src="/images/user/user-01.jpg" size="xlarge" />
            </DemoBox>
            
            <DemoBox label="status: online | offline | busy | none">
              <Avatar src="/images/user/user-01.jpg" status="online" />
              <Avatar src="/images/user/user-01.jpg" status="offline" />
              <Avatar src="/images/user/user-01.jpg" status="busy" />
              <Avatar src="/images/user/user-01.jpg" status="none" />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* BREADCRUMB */}
          {/* ================================================================ */}
          <Section id="breadcrumb" title="Breadcrumb">
            <DemoBox label="Breadcrumb component">
              <Breadcrumb items={[
                { label: 'Home', path: '/', icon: <GridIcon className="w-4 h-4" /> },
                { label: 'Category', path: '/category' },
                { label: 'Current Page' },
              ]} />
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* LIST */}
          {/* ================================================================ */}
          <Section id="list" title="List">
            <DemoBox label="List variants">
              <List variant="unordered">
                <ListItem><ListDot />Item One</ListItem>
                <ListItem><ListDot />Item Two</ListItem>
                <ListItem><ListDot />Item Three</ListItem>
              </List>
            </DemoBox>
            
            <DemoBox label="ListCheckboxItem">
              <List variant="checkbox">
                <ListCheckboxItem 
                  id="check1" 
                  label="Checkbox Option" 
                  checked={checkboxChecked}
                  onChange={setCheckboxChecked}
                />
              </List>
            </DemoBox>
            
            <DemoBox label="ListRadioItem">
              <List variant="radio">
                <ListRadioItem 
                  id="radio1" 
                  name="radioGroup" 
                  value="option1" 
                  label="Option One" 
                  checked={radioValue === 'option1'}
                  onChange={setRadioValue}
                />
                <ListRadioItem 
                  id="radio2" 
                  name="radioGroup" 
                  value="option2" 
                  label="Option Two" 
                  checked={radioValue === 'option2'}
                  onChange={setRadioValue}
                />
              </List>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* TOOLTIP */}
          {/* ================================================================ */}
          <Section id="tooltip" title="Tooltip">
            <DemoBox label="placements: top | bottom | left | right">
              <Tooltip text="Top tooltip" placement="top">
                <Button variant="outline" size="sm">Top</Button>
              </Tooltip>
              <Tooltip text="Bottom tooltip" placement="bottom">
                <Button variant="outline" size="sm">Bottom</Button>
              </Tooltip>
              <Tooltip text="Left tooltip" placement="left">
                <Button variant="outline" size="sm">Left</Button>
              </Tooltip>
              <Tooltip text="Right tooltip" placement="right">
                <Button variant="outline" size="sm">Right</Button>
              </Tooltip>
            </DemoBox>
            
            <DemoBox label="EnhancedTooltip (supports ReactNode content)">
              <EnhancedTooltip 
                content={
                  <div>
                    <strong>Rich Content</strong>
                    <p className="text-xs">With multiple lines</p>
                  </div>
                }
              >
                <Button variant="outline" size="sm">Hover Me</Button>
              </EnhancedTooltip>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* RIBBON */}
          {/* ================================================================ */}
          <Section id="ribbon" title="Ribbon">
            <DemoBox label="Ribbon variants">
              <Ribbon text="New" variant="rounded" color="primary">
                <Card className="w-48 h-24">
                  <CardContent>Card with ribbon</CardContent>
                </Card>
              </Ribbon>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* TOAST */}
          {/* ================================================================ */}
          <Section id="toast" title="Toast">
            <DemoBox label="Toast notifications (via useToast hook)">
              <Button onClick={() => toast.success('Success', 'Operation completed!')}>
                Show Success
              </Button>
              <Button onClick={() => toast.error('Error', 'Something went wrong!')} tone="danger">
                Show Error
              </Button>
              <Button onClick={() => toast.warning('Warning', 'Please review!')} tone="warning">
                Show Warning
              </Button>
              <Button onClick={() => toast.info('Info', 'Here is some information')} variant="outline">
                Show Info
              </Button>
            </DemoBox>
          </Section>

          {/* ================================================================ */}
          {/* DATAVIEW */}
          {/* ================================================================ */}
          <Section id="dataview" title="DataView">
            <DemoBox label="DataView container">
              <DataView className="w-full">
                <DataViewHeader 
                  title="Data View Title" 
                  description="Description of the data view"
                  actions={<Button size="sm">Action</Button>}
                />
                <DataViewToolbar>
                  <Button size="sm" variant="outline">Filter</Button>
                  <Button size="sm" variant="outline">Sort</Button>
                </DataViewToolbar>
                <div className="p-4 text-gray-500">Data content goes here...</div>
              </DataView>
            </DemoBox>
            
            <DemoBox label="DataViewEmptyState">
              <DataViewEmptyState 
                title="No Data Found" 
                description="Try adjusting your filters or add new items"
                action={<Button size="sm">Add Item</Button>}
              />
            </DemoBox>
          </Section>

        </div>
      </div>
    </>
  );
}