import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
import type { IView } from './dees-simple-appdash.js';
import './dees-form.js';
import './dees-input-text.js';
import './dees-input-checkbox.js';
import './dees-input-dropdown.js';
import './dees-input-radio.js';
import './dees-form-submit.js';
import './dees-statsgrid.js';
import type { IStatsTile } from './dees-statsgrid.js';

// Create demo view components
@customElement('demo-view-dashboard')
class DemoViewDashboard extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      dees-statsgrid {
        margin-top: 20px;
      }
    `
  ];
  
  private statsTiles: IStatsTile[] = [
    {
      id: 'users',
      title: 'Active Users',
      value: 1234,
      type: 'number',
      icon: 'faUsers',
      description: '+15% from last week',
      color: '#22c55e'
    },
    {
      id: 'pageviews',
      title: 'Page Views',
      value: 56700,
      type: 'number',
      icon: 'faEye',
      description: '56.7k total views',
      color: '#3b82f6'
    },
    {
      id: 'uptime',
      title: 'System Uptime',
      value: 89,
      unit: '%',
      type: 'gauge',
      icon: 'faServer',
      description: 'Last 30 days',
      color: '#10b981',
      gaugeOptions: {
        min: 0,
        max: 100,
        thresholds: [
          { value: 80, color: '#ef4444' },
          { value: 90, color: '#f59e0b' },
          { value: 100, color: '#10b981' }
        ]
      }
    },
    {
      id: 'response',
      title: 'Avg Response Time',
      value: 3.2,
      unit: 's',
      type: 'number',
      icon: 'faClock',
      description: '-0.5s improvement',
      color: '#f59e0b'
    },
    {
      id: 'revenue',
      title: 'Monthly Revenue',
      value: 48520,
      unit: '$',
      type: 'trend',
      icon: 'faDollarSign',
      description: '+8.2% growth',
      color: '#22c55e',
      trendData: [35000, 38000, 37500, 41000, 39800, 42000, 44100, 43200, 45600, 47100, 46800, 48520]
    },
    {
      id: 'traffic',
      title: 'Traffic Trend',
      value: 1680,
      type: 'trend',
      icon: 'faChartLine',
      description: 'Last 7 days',
      color: '#3b82f6',
      trendData: [1200, 1350, 1100, 1450, 1600, 1550, 1680]
    }
  ];
  
  render() {
    return html`
      <h1>Dashboard</h1>
      <p>Welcome to your application dashboard. Here's an overview of your metrics:</p>
      <dees-statsgrid
        .tiles=${this.statsTiles}
        @tile-action=${(e: CustomEvent) => {
          console.log('Tile action:', e.detail);
        }}
      ></dees-statsgrid>
    `;
  }
}

@customElement('demo-view-analytics')
class DemoViewAnalytics extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
    `
  ];
  
  render() {
    return html`
      <h1>Analytics</h1>
      <p>This is the analytics view. You can add charts and metrics here.</p>
    `;
  }
}

@customElement('demo-view-settings')
class DemoViewSettings extends DeesElement {
  static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        padding: 40px;
      }
      h1 {
        margin: 0 0 20px 0;
        color: ${cssManager.bdTheme('#000', '#fff')};
      }
      .settings-section {
        margin-top: 30px;
      }
      .settings-section h2 {
        font-size: 18px;
        margin: 0 0 15px 0;
        color: ${cssManager.bdTheme('#333', '#ccc')};
      }
      .horizontal-form-section {
        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
        padding: 20px;
        border-radius: 8px;
        margin: 15px 0;
      }
    `
  ];
  
  render() {
    return html`
      <h1>Settings</h1>
      <p>Configure your application settings below:</p>
      
      <div class="settings-section">
        <h2>General Settings</h2>
        <dees-form>
          <dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
          <dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
          <dees-input-dropdown
            key="environment"
            label="Environment"
            .options=${[
              { option: 'Development', key: 'dev' },
              { option: 'Staging', key: 'staging' },
              { option: 'Production', key: 'prod' }
            ]}
            .selectedOption=${{ option: 'Production', key: 'prod' }}
          ></dees-input-dropdown>
          <dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
          <dees-input-checkbox key="enableAnalytics" label="Enable Analytics" value="false"></dees-input-checkbox>
          <dees-form-submit>Save General Settings</dees-form-submit>
        </dees-form>
      </div>
      
      <div class="settings-section">
        <h2>Display Preferences</h2>
        <div class="horizontal-form-section">
          <p style="margin-top: 0; margin-bottom: 16px;">Quick display settings using horizontal layout:</p>
          <dees-form horizontal-layout>
            <dees-input-dropdown
              key="theme"
              label="Theme"
              .enableSearch=${false}
              .options=${[
                { option: 'Light', key: 'light' },
                { option: 'Dark', key: 'dark' },
                { option: 'Auto', key: 'auto' }
              ]}
              .selectedOption=${{ option: 'Dark', key: 'dark' }}
            ></dees-input-dropdown>
            <dees-input-dropdown
              key="language"
              label="Language"
              .enableSearch=${false}
              .options=${[
                { option: 'English', key: 'en' },
                { option: 'German', key: 'de' },
                { option: 'Spanish', key: 'es' },
                { option: 'French', key: 'fr' }
              ]}
              .selectedOption=${{ option: 'English', key: 'en' }}
            ></dees-input-dropdown>
            <dees-input-checkbox key="compactMode" label="Compact Mode"></dees-input-checkbox>
          </dees-form>
        </div>
      </div>
      
      <div class="settings-section">
        <h2>Notification Settings</h2>
        <dees-form>
          <div style="margin-bottom: 16px;">
            <div style="font-weight: 500; margin-bottom: 8px;">Email Frequency:</div>
            <dees-input-radio label="Real-time" value="true" key="email-realtime"></dees-input-radio>
            <dees-input-radio label="Daily Digest" key="email-daily"></dees-input-radio>
            <dees-input-radio label="Weekly Summary" key="email-weekly"></dees-input-radio>
            <dees-input-radio label="Never" key="email-never"></dees-input-radio>
          </div>
          <dees-input-checkbox key="pushNotifications" label="Enable Push Notifications" value="true"></dees-input-checkbox>
          <dees-input-checkbox key="soundAlerts" label="Play Sound for Alerts" value="true"></dees-input-checkbox>
          <dees-form-submit>Update Notifications</dees-form-submit>
        </dees-form>
      </div>
    `;
  }
}

export const demoFunc = () => html`
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .demo-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
  <div class="demo-container">
    <dees-simple-appdash
      name="My Application"
      terminalSetupCommand="echo 'Welcome to the terminal!'"
      .viewTabs=${[
        {
          name: 'Dashboard',
          iconName: 'home',
          element: DemoViewDashboard,
        },
        {
          name: 'Analytics',
          iconName: 'lineChart',
          element: DemoViewAnalytics,
        },
        {
          name: 'Settings',
          iconName: 'settings',
          element: DemoViewSettings,
        }
      ] as IView[]}
      @logout=${() => {
        console.log('Logout event triggered');
        alert('Logout clicked!');
      }}
      @view-select=${(e: CustomEvent) => {
        console.log('View selected:', e.detail.view.name);
      }}
    ></dees-simple-appdash>
  </div>
`;