import { type ITableAction } from './dees-table.js';
import * as plugins from './00plugins.js';
import { html, css, cssManager } from '@design.estate/dees-element';

interface ITableDemoData {
  date: string;
  amount: string;
  description: string;
}

export const demoFunc = () => html`
  <style>
    ${css`
      .demoWrapper {
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 32px;
        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
        overflow-y: auto;
      }
      .demo-container {
        max-width: 1200px;
        margin: 0 auto;
      }
      .demo-section {
        margin-bottom: 48px;
      }
      .demo-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }
      .demo-description {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        margin-bottom: 24px;
      }
      .theme-toggle {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1000;
      }
    `}
  </style>
  <div class="demoWrapper">
    <dees-button class="theme-toggle" @click=${() => {
      document.body.classList.toggle('bright');
      document.body.classList.toggle('dark');
    }}>Toggle Theme</dees-button>
    
    <div class="demo-container">
      <div class="demo-section">
        <h2 class="demo-title">Basic Table with Actions</h2>
        <p class="demo-description">A standard table with row actions, editable fields, and context menu support. Double-click on descriptions to edit. Grid lines are enabled by default.</p>
        <dees-table
          heading1="Current Account Statement"
          heading2="Bunq - Payment Account 2 - April 2021"
          .editableFields="${['description']}"
          .data=${[
            {
              date: '2021-04-01',
              amount: '2464.65 €',
              description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
            },
            {
              date: '2021-04-02',
              amount: '165.65 €',
              description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
            },
            {
              date: '2021-04-03',
              amount: '2999,00 €',
              description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
            },
            {
              date: '2021-04-01',
              amount: '2464.65 €',
              description: 'Office-Supplies - STAPLES BREMEN',
            },
            {
              date: '2021-04-01',
              amount: '2464.65 €',
              description: 'Office-Supplies - STAPLES BREMEN',
            },
          ]}
          dataName="transactions"
          .dataActions="${[
            {
              name: 'upload',
              iconName: 'bell',
              useTableBehaviour: 'upload',
              type: ['inRow'],
              actionFunc: async (optionsArg) => {
                alert(optionsArg.item.amount);
              },
            },
            {
              name: 'visibility',
              iconName: 'copy',
              type: ['inRow'],
              useTableBehaviour: 'preview',
              actionFunc: async (itemArg: any) => {},
            },
            {
              name: 'create new',
              iconName: 'instagram',
              type: ['header'],
              useTableBehaviour: 'preview',
              actionFunc: async (itemArg: any) => {},
            },
            {
              name: 'to gallery',
              iconName: 'message',
              type: ['footer'],
              useTableBehaviour: 'preview',
              actionFunc: async (itemArg: any) => {},
            },
            {
              name: 'copy',
              iconName: 'copySolid',
              type: ['contextmenu', 'inRow'],
              action: async () => {
                return null;
              },
            },
            {
              name: 'edit (from demo)',
              iconName: 'penToSquare',
              type: ['contextmenu'],
              action: async () => {
                return null;
              },
            },
            {
              name: 'paste',
              iconName: 'pasteSolid',
              type: ['contextmenu'],
              action: async () => {
                return null;
              },
            },
            {
              name: 'preview',
              type: ['doubleClick', 'contextmenu'],
              iconName: 'eye',
              actionFunc: async (itemArg) => {
                alert(itemArg.item.amount);
                return null;
              },
            }
          ] as ITableAction[]}"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Vertical Lines</h2>
        <p class="demo-description">Enhanced column separation for better data tracking.</p>
        <dees-table
          heading1="Product Inventory"
          heading2="Current stock levels across warehouses"
          .showVerticalLines=${true}
          .data=${[
            {
              product: 'MacBook Pro 16"',
              warehouse_a: '45',
              warehouse_b: '32',
              warehouse_c: '28',
              total: '105',
              status: '✓ In Stock'
            },
            {
              product: 'iPhone 15 Pro',
              warehouse_a: '120',
              warehouse_b: '89',
              warehouse_c: '156',
              total: '365',
              status: '✓ In Stock'
            },
            {
              product: 'AirPods Pro',
              warehouse_a: '0',
              warehouse_b: '12',
              warehouse_c: '5',
              total: '17',
              status: '⚠ Low Stock'
            },
            {
              product: 'iPad Air',
              warehouse_a: '23',
              warehouse_b: '45',
              warehouse_c: '67',
              total: '135',
              status: '✓ In Stock'
            }
          ]}
          dataName="products"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Full Grid</h2>
        <p class="demo-description">Complete grid lines for maximum readability and structure.</p>
        <dees-table
          heading1="Server Monitoring Dashboard"
          heading2="Real-time metrics across regions"
          .showGrid=${true}
          .data=${[
            {
              server: 'API-1',
              region: 'US-East',
              cpu: '45%',
              memory: '62%',
              disk: '78%',
              latency: '12ms',
              uptime: '99.9%',
              status: '🟢 Healthy'
            },
            {
              server: 'API-2',
              region: 'EU-West',
              cpu: '38%',
              memory: '55%',
              disk: '45%',
              latency: '25ms',
              uptime: '99.8%',
              status: '🟢 Healthy'
            },
            {
              server: 'DB-Master',
              region: 'US-East',
              cpu: '72%',
              memory: '81%',
              disk: '92%',
              latency: '8ms',
              uptime: '100%',
              status: '🟡 Warning'
            },
            {
              server: 'DB-Replica',
              region: 'EU-West',
              cpu: '23%',
              memory: '34%',
              disk: '45%',
              latency: '15ms',
              uptime: '99.7%',
              status: '🟢 Healthy'
            },
            {
              server: 'Cache-1',
              region: 'AP-South',
              cpu: '89%',
              memory: '92%',
              disk: '12%',
              latency: '120ms',
              uptime: '98.5%',
              status: '🔴 Critical'
            }
          ]}
          dataName="servers"
          .dataActions="${[
            {
              name: 'SSH Connect',
              iconName: 'lucide:terminal',
              type: ['inRow'],
              actionFunc: async (optionsArg) => {
                console.log('Connecting to:', optionsArg.item.server);
              },
            },
            {
              name: 'View Logs',
              iconName: 'lucide:file-text',
              type: ['inRow', 'contextmenu'],
              actionFunc: async (optionsArg) => {
                console.log('Viewing logs for:', optionsArg.item.server);
              },
            },
            {
              name: 'Restart Server',
              iconName: 'lucide:refresh-cw',
              type: ['contextmenu'],
              actionFunc: async (optionsArg) => {
                console.log('Restarting:', optionsArg.item.server);
              },
            }
          ] as ITableAction[]}"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Horizontal Lines Only</h2>
        <p class="demo-description">Emphasis on row separation without column dividers.</p>
        <dees-table
          heading1="Sales Performance"
          heading2="Top performers this quarter"
          .showHorizontalLines=${true}
          .showVerticalLines=${false}
          .data=${[
            {
              salesperson: 'Emily Johnson',
              region: 'North America',
              deals_closed: '42',
              revenue: '$1.2M',
              quota_achievement: '128%',
              rating: '⭐⭐⭐⭐⭐'
            },
            {
              salesperson: 'Michael Chen',
              region: 'Asia Pacific',
              deals_closed: '38',
              revenue: '$980K',
              quota_achievement: '115%',
              rating: '⭐⭐⭐⭐⭐'
            },
            {
              salesperson: 'Sarah Williams',
              region: 'Europe',
              deals_closed: '35',
              revenue: '$875K',
              quota_achievement: '108%',
              rating: '⭐⭐⭐⭐'
            },
            {
              salesperson: 'David Garcia',
              region: 'Latin America',
              deals_closed: '31',
              revenue: '$750K',
              quota_achievement: '95%',
              rating: '⭐⭐⭐⭐'
            }
          ]}
          dataName="sales reps"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Simple Table (No Grid)</h2>
        <p class="demo-description">Clean, minimal design without grid lines. Set showGrid to false to disable the default grid.</p>
        <dees-table
          heading1="Team Members"
          heading2="Engineering Department"
          .showGrid=${false}
          .data=${[
            {
              name: 'Alice Johnson',
              role: 'Lead Engineer',
              email: 'alice@company.com',
              location: 'San Francisco',
              joined: '2020-03-15'
            },
            {
              name: 'Bob Smith',
              role: 'Senior Developer',
              email: 'bob@company.com',
              location: 'New York',
              joined: '2019-07-22'
            },
            {
              name: 'Charlie Davis',
              role: 'DevOps Engineer',
              email: 'charlie@company.com',
              location: 'London',
              joined: '2021-01-10'
            },
            {
              name: 'Diana Martinez',
              role: 'Frontend Developer',
              email: 'diana@company.com',
              location: 'Barcelona',
              joined: '2022-05-18'
            }
          ]}
          dataName="team members"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Table with Custom Display Function</h2>
        <p class="demo-description">Transform data for display using custom formatting.</p>
        <dees-table
          heading1="Sales Report"
          heading2="Q4 2023 Performance"
          .data=${[
            {
              product: 'Enterprise License',
              units: 45,
              revenue: 225000,
              growth: 0.23,
              forecast: 280000
            },
            {
              product: 'Professional License',
              units: 128,
              revenue: 128000,
              growth: 0.15,
              forecast: 147000
            },
            {
              product: 'Starter License',
              units: 342,
              revenue: 68400,
              growth: 0.42,
              forecast: 97000
            }
          ]}
          .displayFunction=${(item) => ({
            Product: item.product,
            'Units Sold': item.units.toLocaleString(),
            Revenue: '$' + item.revenue.toLocaleString(),
            Growth: (item.growth * 100).toFixed(1) + '%',
            'Q1 2024 Forecast': '$' + item.forecast.toLocaleString()
          })}
          dataName="products"
        ></dees-table>
      </div>
      
      <div class="demo-section">
        <h2 class="demo-title">Empty Table State</h2>
        <p class="demo-description">How the table looks when no data is available.</p>
        <dees-table
          heading1="No Data Available"
          heading2="This table is currently empty"
          .data=${[]}
          dataName="items"
        ></dees-table>
      </div>
    </div>
  </div>
`;