import {
  customElement,
  DeesElement,
  type TemplateResult,
  html,
  property,
  css,
  cssManager,
  state,
} from '@design.estate/dees-element';
import { DeesAppuiSecondarymenu, DeesIcon } from '@design.estate/dees-catalog';
import type { ISecondaryMenuGroup, ISecondaryMenuItem } from '../../elements/interfaces/secondarymenu.js';
import { demo } from './eco-view-settings.demo.js';

// Ensure components are registered
DeesAppuiSecondarymenu;
DeesIcon;

declare global {
  interface HTMLElementTagNameMap {
    'eco-view-settings': EcoViewSettings;
  }
}

export type TSettingsPanel =
  | 'general'
  | 'network'
  | 'bluetooth'
  | 'display'
  | 'sound'
  | 'notifications'
  | 'privacy'
  | 'accounts'
  | 'apps'
  | 'updates'
  | 'about';

@customElement('eco-view-settings')
export class EcoViewSettings extends DeesElement {
  public static demo = demo;
  public static demoGroup = 'Views';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        width: 100%;
        height: 100%;
        background: ${cssManager.bdTheme('#f5f5f7', 'hsl(240 6% 10%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      }

      .settings-container {
        display: flex;
        height: 100%;
      }

      dees-appui-secondarymenu {
        flex-shrink: 0;
        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 8%)')};
        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 15%)')};
      }

      .content {
        flex: 1;
        overflow-y: auto;
        padding: 32px 48px;
      }

      .panel-header {
        margin-bottom: 32px;
      }

      .panel-title {
        font-size: 28px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
        margin-bottom: 8px;
      }

      .panel-description {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 60%)')};
      }

      .settings-section {
        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 12%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(240 5% 18%)')};
        border-radius: 12px;
        margin-bottom: 24px;
        overflow: hidden;
      }

      .section-title {
        padding: 16px 20px 12px;
        font-size: 13px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .settings-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(240 5% 15%)')};
        transition: background 0.15s ease;
      }

      .settings-item:first-child {
        border-top: none;
      }

      .settings-item:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(240 5% 14%)')};
      }

      .settings-item.clickable {
        cursor: pointer;
      }

      .item-left {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .item-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .item-icon.blue { background: hsl(217 91% 60%); }
      .item-icon.green { background: hsl(142 71% 45%); }
      .item-icon.orange { background: hsl(25 95% 53%); }
      .item-icon.purple { background: hsl(262 83% 58%); }
      .item-icon.red { background: hsl(0 72% 51%); }
      .item-icon.teal { background: hsl(175 84% 32%); }
      .item-icon.gray { background: hsl(220 9% 46%); }

      .item-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .item-label {
        font-size: 15px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 98%)')};
      }

      .item-sublabel {
        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
      }

      .item-right {
        display: flex;
        align-items: center;
        gap: 8px;
        color: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 50%)')};
      }

      .item-value {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 55%)')};
      }

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      .toggle-switch.active {
        background: hsl(217 91% 60%);
      }

      .toggle-switch::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: white;
        border-radius: 50%;
        transition: transform 0.2s ease;
        box-shadow: ${cssManager.bdTheme('0 1px 3px rgba(0,0,0,0.2)', 'none')};
      }

      .toggle-switch.active::after {
        transform: translateX(20px);
      }

      .slider-container {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 200px;
      }

      .slider {
        flex: 1;
        height: 4px;
        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(240 5% 25%)')};
        border-radius: 2px;
        position: relative;
        cursor: pointer;
      }

      .slider-fill {
        height: 100%;
        background: hsl(217 91% 60%);
        border-radius: 2px;
      }

      .slider-value {
        min-width: 36px;
        text-align: right;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
      }

      select {
        padding: 8px 32px 8px 12px;
        font-size: 14px;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(240 5% 25%)')};
        border-radius: 8px;
        background: ${cssManager.bdTheme('#ffffff', 'hsl(240 6% 15%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 10%)', 'hsl(0 0% 90%)')};
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
      }

      select:focus {
        outline: none;
        border-color: hsl(217 91% 60%);
      }
    `,
  ];

  @property({ type: String })
  accessor activePanel: TSettingsPanel = 'general';

  @state()
  accessor wifiEnabled = true;

  @state()
  accessor bluetoothEnabled = true;

  @state()
  accessor darkMode = true;

  @state()
  accessor notificationsEnabled = true;

  @state()
  accessor soundEnabled = true;

  @state()
  accessor brightness = 80;

  @state()
  accessor volume = 70;

  private getMenuGroups(): ISecondaryMenuGroup[] {
    return [
      {
        name: 'System',
        iconName: 'lucide:settings',
        items: [
          {
            key: 'general',
            iconName: 'lucide:settings',
            action: () => this.activePanel = 'general',
          },
          {
            key: 'display',
            iconName: 'lucide:monitor',
            action: () => this.activePanel = 'display',
          },
          {
            key: 'sound',
            iconName: 'lucide:volume2',
            action: () => this.activePanel = 'sound',
          },
          {
            key: 'notifications',
            iconName: 'lucide:bell',
            action: () => this.activePanel = 'notifications',
          },
        ],
      },
      {
        name: 'Network',
        iconName: 'lucide:wifi',
        items: [
          {
            key: 'network',
            iconName: 'lucide:wifi',
            action: () => this.activePanel = 'network',
          },
          {
            key: 'bluetooth',
            iconName: 'lucide:bluetooth',
            action: () => this.activePanel = 'bluetooth',
          },
        ],
      },
      {
        name: 'Personal',
        iconName: 'lucide:user',
        items: [
          {
            key: 'accounts',
            iconName: 'lucide:user',
            action: () => this.activePanel = 'accounts',
          },
          {
            key: 'privacy',
            iconName: 'lucide:shield',
            action: () => this.activePanel = 'privacy',
          },
        ],
      },
      {
        name: 'System Info',
        iconName: 'lucide:info',
        items: [
          {
            key: 'apps',
            iconName: 'lucide:layoutGrid',
            action: () => this.activePanel = 'apps',
          },
          {
            key: 'updates',
            iconName: 'lucide:download',
            action: () => this.activePanel = 'updates',
          },
          {
            key: 'about',
            iconName: 'lucide:info',
            action: () => this.activePanel = 'about',
          },
        ],
      },
    ];
  }

  private getSelectedItem(): ISecondaryMenuItem | null {
    for (const group of this.getMenuGroups()) {
      for (const item of group.items) {
        if ('key' in item && item.key === this.activePanel) {
          return item;
        }
      }
    }
    return null;
  }

  public render(): TemplateResult {
    return html`
      <div class="settings-container">
        <dees-appui-secondarymenu
          .heading=${'Settings'}
          .groups=${this.getMenuGroups()}
          .selectedItem=${this.getSelectedItem()}
        ></dees-appui-secondarymenu>
        <div class="content">
          ${this.renderActivePanel()}
        </div>
      </div>
    `;
  }

  private renderActivePanel(): TemplateResult {
    switch (this.activePanel) {
      case 'general':
        return this.renderGeneralPanel();
      case 'network':
        return this.renderNetworkPanel();
      case 'bluetooth':
        return this.renderBluetoothPanel();
      case 'display':
        return this.renderDisplayPanel();
      case 'sound':
        return this.renderSoundPanel();
      case 'notifications':
        return this.renderNotificationsPanel();
      case 'privacy':
        return this.renderPrivacyPanel();
      case 'accounts':
        return this.renderAccountsPanel();
      case 'apps':
        return this.renderAppsPanel();
      case 'updates':
        return this.renderUpdatesPanel();
      case 'about':
        return this.renderAboutPanel();
      default:
        return this.renderGeneralPanel();
    }
  }

  private renderGeneralPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">General</div>
        <div class="panel-description">Configure general system settings</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Appearance</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon gray">
              <dees-icon .icon=${'lucide:moon'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Dark Mode</div>
              <div class="item-sublabel">Use dark theme throughout the system</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.darkMode ? 'active' : ''}"
            @click=${() => this.darkMode = !this.darkMode}
          ></div>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:type'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Text Size</div>
            </div>
          </div>
          <select>
            <option>Small</option>
            <option selected>Medium</option>
            <option>Large</option>
          </select>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Language & Region</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon purple">
              <dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Language</div>
            </div>
          </div>
          <div class="item-right">
            <span class="item-value">English (US)</span>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon teal">
              <dees-icon .icon=${'lucide:clock'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Time Zone</div>
            </div>
          </div>
          <div class="item-right">
            <span class="item-value">UTC+01:00</span>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>
      </div>
    `;
  }

  private renderNetworkPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Network</div>
        <div class="panel-description">Manage Wi-Fi and network connections</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Wi-Fi</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:wifi'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Wi-Fi</div>
              <div class="item-sublabel">${this.wifiEnabled ? 'Connected to HomeNetwork' : 'Off'}</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.wifiEnabled ? 'active' : ''}"
            @click=${() => this.wifiEnabled = !this.wifiEnabled}
          ></div>
        </div>
      </div>

      ${this.wifiEnabled ? html`
        <div class="settings-section">
          <div class="section-title">Available Networks</div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-info">
                <div class="item-label">HomeNetwork</div>
                <div class="item-sublabel">Connected</div>
              </div>
            </div>
            <div class="item-right">
              <dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
            </div>
          </div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-info">
                <div class="item-label">OfficeWiFi</div>
              </div>
            </div>
            <div class="item-right">
              <dees-icon .icon=${'lucide:lock'} .iconSize=${14}></dees-icon>
              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
            </div>
          </div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-info">
                <div class="item-label">CoffeeShop_Guest</div>
              </div>
            </div>
            <div class="item-right">
              <dees-icon .icon=${'lucide:wifi'} .iconSize=${16}></dees-icon>
            </div>
          </div>
        </div>
      ` : ''}
    `;
  }

  private renderBluetoothPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Bluetooth</div>
        <div class="panel-description">Manage Bluetooth devices and connections</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Bluetooth</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:bluetooth'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Bluetooth</div>
              <div class="item-sublabel">${this.bluetoothEnabled ? 'On' : 'Off'}</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.bluetoothEnabled ? 'active' : ''}"
            @click=${() => this.bluetoothEnabled = !this.bluetoothEnabled}
          ></div>
        </div>
      </div>

      ${this.bluetoothEnabled ? html`
        <div class="settings-section">
          <div class="section-title">Connected Devices</div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-icon gray">
                <dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
              </div>
              <div class="item-info">
                <div class="item-label">AirPods Pro</div>
                <div class="item-sublabel">Connected</div>
              </div>
            </div>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>

        <div class="settings-section">
          <div class="section-title">Available Devices</div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-info">
                <div class="item-label">Magic Keyboard</div>
              </div>
            </div>
          </div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-info">
                <div class="item-label">JBL Speaker</div>
              </div>
            </div>
          </div>
        </div>
      ` : ''}
    `;
  }

  private renderDisplayPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Display</div>
        <div class="panel-description">Adjust display and brightness settings</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Brightness</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon orange">
              <dees-icon .icon=${'lucide:sun'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Brightness</div>
            </div>
          </div>
          <div class="slider-container">
            <dees-icon .icon=${'lucide:sunDim'} .iconSize=${16}></dees-icon>
            <div class="slider">
              <div class="slider-fill" style="width: ${this.brightness}%"></div>
            </div>
            <dees-icon .icon=${'lucide:sun'} .iconSize=${16}></dees-icon>
          </div>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:sparkles'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Auto-Brightness</div>
              <div class="item-sublabel">Automatically adjust based on ambient light</div>
            </div>
          </div>
          <div class="toggle-switch active"></div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Night Shift</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon orange">
              <dees-icon .icon=${'lucide:moonStar'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Night Shift</div>
              <div class="item-sublabel">Reduce blue light in the evening</div>
            </div>
          </div>
          <div class="toggle-switch"></div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Resolution</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon purple">
              <dees-icon .icon=${'lucide:monitor'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Display Resolution</div>
            </div>
          </div>
          <select>
            <option>1920 x 1080</option>
            <option selected>2560 x 1440</option>
            <option>3840 x 2160</option>
          </select>
        </div>
      </div>
    `;
  }

  private renderSoundPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Sound</div>
        <div class="panel-description">Configure audio settings and output devices</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Volume</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:volume2'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Output Volume</div>
            </div>
          </div>
          <div class="slider-container">
            <dees-icon .icon=${'lucide:volumeX'} .iconSize=${16}></dees-icon>
            <div class="slider">
              <div class="slider-fill" style="width: ${this.volume}%"></div>
            </div>
            <span class="slider-value">${this.volume}%</span>
          </div>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon gray">
              <dees-icon .icon=${'lucide:volumeX'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Mute</div>
            </div>
          </div>
          <div
            class="toggle-switch ${!this.soundEnabled ? 'active' : ''}"
            @click=${() => this.soundEnabled = !this.soundEnabled}
          ></div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Output Device</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon teal">
              <dees-icon .icon=${'lucide:speaker'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Built-in Speakers</div>
              <div class="item-sublabel">Selected</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:check'} .iconSize=${18}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon gray">
              <dees-icon .icon=${'lucide:headphones'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">AirPods Pro</div>
            </div>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Sound Effects</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Play sound effects</div>
            </div>
          </div>
          <div class="toggle-switch active"></div>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Play startup sound</div>
            </div>
          </div>
          <div class="toggle-switch active"></div>
        </div>
      </div>
    `;
  }

  private renderNotificationsPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Notifications</div>
        <div class="panel-description">Control how apps notify you</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Notifications</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon red">
              <dees-icon .icon=${'lucide:bell'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Allow Notifications</div>
              <div class="item-sublabel">Show notifications from apps and services</div>
            </div>
          </div>
          <div
            class="toggle-switch ${this.notificationsEnabled ? 'active' : ''}"
            @click=${() => this.notificationsEnabled = !this.notificationsEnabled}
          ></div>
        </div>
      </div>

      ${this.notificationsEnabled ? html`
        <div class="settings-section">
          <div class="section-title">App Notifications</div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-icon blue">
                <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
              </div>
              <div class="item-info">
                <div class="item-label">Mail</div>
                <div class="item-sublabel">Banners, Sounds, Badges</div>
              </div>
            </div>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-icon green">
                <dees-icon .icon=${'lucide:messageSquare'} .iconSize=${18}></dees-icon>
              </div>
              <div class="item-info">
                <div class="item-label">Messages</div>
                <div class="item-sublabel">Banners, Sounds, Badges</div>
              </div>
            </div>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
          <div class="settings-item clickable">
            <div class="item-left">
              <div class="item-icon orange">
                <dees-icon .icon=${'lucide:calendar'} .iconSize=${18}></dees-icon>
              </div>
              <div class="item-info">
                <div class="item-label">Calendar</div>
                <div class="item-sublabel">Banners, Sounds</div>
              </div>
            </div>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>
      ` : ''}
    `;
  }

  private renderPrivacyPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Privacy & Security</div>
        <div class="panel-description">Manage privacy settings and app permissions</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Privacy</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:mapPin'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Location Services</div>
              <div class="item-sublabel">On</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon green">
              <dees-icon .icon=${'lucide:camera'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Camera</div>
              <div class="item-sublabel">3 apps have access</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon red">
              <dees-icon .icon=${'lucide:mic'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Microphone</div>
              <div class="item-sublabel">2 apps have access</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Security</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon gray">
              <dees-icon .icon=${'lucide:fingerprint'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Touch ID & Password</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
      </div>
    `;
  }

  private renderAccountsPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Accounts</div>
        <div class="panel-description">Manage your accounts and sign-in options</div>
      </div>

      <div class="settings-section">
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon blue" style="width: 48px; height: 48px; border-radius: 24px; font-size: 20px; font-weight: 600;">
              JD
            </div>
            <div class="item-info">
              <div class="item-label">John Doe</div>
              <div class="item-sublabel">john.doe@example.com</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Connected Accounts</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon" style="background: #4285f4;">
              <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Google</div>
              <div class="item-sublabel">john.doe@gmail.com</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon" style="background: #0078d4;">
              <dees-icon .icon=${'lucide:cloud'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Microsoft</div>
              <div class="item-sublabel">john.doe@outlook.com</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
      </div>
    `;
  }

  private renderAppsPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Apps</div>
        <div class="panel-description">Manage installed applications</div>
      </div>

      <div class="settings-section">
        <div class="section-title">Default Apps</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:globe'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Web Browser</div>
            </div>
          </div>
          <div class="item-right">
            <span class="item-value">Browser</span>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-icon blue">
              <dees-icon .icon=${'lucide:mail'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Email Client</div>
            </div>
          </div>
          <div class="item-right">
            <span class="item-value">Mail</span>
            <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Installed Apps</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Browser</div>
              <div class="item-sublabel">Version 120.0.1</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Mail</div>
              <div class="item-sublabel">Version 16.0</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Calendar</div>
              <div class="item-sublabel">Version 14.0</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:chevronRight'} .iconSize=${16}></dees-icon>
        </div>
      </div>
    `;
  }

  private renderUpdatesPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">Software Updates</div>
        <div class="panel-description">Keep your system up to date</div>
      </div>

      <div class="settings-section">
        <div class="settings-item">
          <div class="item-left">
            <div class="item-icon green">
              <dees-icon .icon=${'lucide:checkCircle'} .iconSize=${18}></dees-icon>
            </div>
            <div class="item-info">
              <div class="item-label">Your system is up to date</div>
              <div class="item-sublabel">Last checked: Today at 9:00 AM</div>
            </div>
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Update Settings</div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Automatic Updates</div>
              <div class="item-sublabel">Download and install updates automatically</div>
            </div>
          </div>
          <div class="toggle-switch active"></div>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Beta Updates</div>
              <div class="item-sublabel">Receive early access to new features</div>
            </div>
          </div>
          <div class="toggle-switch"></div>
        </div>
      </div>
    `;
  }

  private renderAboutPanel(): TemplateResult {
    return html`
      <div class="panel-header">
        <div class="panel-title">About</div>
        <div class="panel-description">System information and details</div>
      </div>

      <div class="settings-section">
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Device Name</div>
            </div>
          </div>
          <span class="item-value">EcoBridge Desktop</span>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">System Version</div>
            </div>
          </div>
          <span class="item-value">EcoOS 1.0.0</span>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Processor</div>
            </div>
          </div>
          <span class="item-value">ARM64</span>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Memory</div>
            </div>
          </div>
          <span class="item-value">16 GB</span>
        </div>
        <div class="settings-item">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Storage</div>
            </div>
          </div>
          <span class="item-value">512 GB (256 GB Available)</span>
        </div>
      </div>

      <div class="settings-section">
        <div class="section-title">Legal</div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Terms of Service</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Privacy Policy</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
        </div>
        <div class="settings-item clickable">
          <div class="item-left">
            <div class="item-info">
              <div class="item-label">Open Source Licenses</div>
            </div>
          </div>
          <dees-icon .icon=${'lucide:externalLink'} .iconSize=${16}></dees-icon>
        </div>
      </div>
    `;
  }
}