app/ts_web/elements/account/views/baseview.ts

import * as plugins from '../../../plugins.js';
import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  css,
  state,
  type TemplateResult,
} from '@design.estate/dees-element';

import * as sharedStyles from '../sharedstyles.js';
import * as accountStateModule from '../../../states/accountstate.js';
import { IdpState } from '../../../states/idp.state.js';

declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-baseview': BaseView;
  }
}

interface ISessionDisplay {
  id: string;
  deviceId: string;
  deviceName: string;
  browser: string;
  os: string;
  ip: string;
  lastActive: number;
  createdAt: number;
  isCurrent: boolean;
}

interface IActivityDisplay {
  id: string;
  data: plugins.idpInterfaces.data.IActivityLog['data'];
}

@customElement('lele-accountview-baseview')
export class BaseView extends DeesElement {
  @state()
  accessor loading: boolean = true;

  @state()
  accessor sessions: ISessionDisplay[] = [];

  @state()
  accessor activities: IActivityDisplay[] = [];

  @state()
  accessor user: plugins.idpInterfaces.data.IUser | null = null;

  @state()
  accessor organizations: plugins.idpInterfaces.data.IOrganization[] = [];

  @state()
  accessor roles: plugins.idpInterfaces.data.IRole[] = [];

  public static styles = [
    cssManager.defaultStyles,
    sharedStyles.accountDesignTokens,
    sharedStyles.viewBaseStyles,
    css`
      .container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 32px 24px;
      }

      .header {
        margin-bottom: 32px;
      }

      h1 {
        font-size: 32px;
        font-weight: 600;
        margin: 0;
        letter-spacing: -0.02em;
      }

      .subtitle {
        color: #71717a;
        margin-top: 8px;
        font-size: 14px;
      }

      .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }

      @media (max-width: 768px) {
        .dashboard-grid {
          grid-template-columns: 1fr;
        }
      }

      idp-card.card::part(card) {
        padding: 0;
        overflow: hidden;
      }

      idp-card.card.full-width {
        grid-column: 1 / -1;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #27272a;
      }

      .card-title {
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .card-title idp-icon {
        opacity: 0.7;
      }

      .card-body {
        padding: 16px 20px;
      }

      .card-body.no-padding {
        padding: 0;
      }

      /* Profile Card */
      .profile-info {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
      }

      .profile-details {
        flex: 1;
        min-width: 0;
      }

      .profile-name {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .profile-email {
        font-size: 14px;
        color: #71717a;
        word-break: break-all;
      }

      /* Organizations */
      .org-list {
        display: flex;
        flex-direction: column;
      }

      .org-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        border-bottom: 1px solid #27272a;
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .org-item:last-child {
        border-bottom: none;
      }

      .org-item:hover {
        background: #27272a;
      }

      .org-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #27272a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .org-icon idp-icon {
        opacity: 0.7;
      }

      .org-info {
        flex: 1;
        min-width: 0;
      }

      .org-name {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 2px;
      }

      .org-role {
        font-size: 12px;
        color: #71717a;
      }

      .role-badge {
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 500;
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      .role-badge.admin {
        background: rgba(245, 158, 11, 0.1);
        color: #f59e0b;
      }

      .role-badge.owner {
        background: rgba(139, 92, 246, 0.1);
        color: #8b5cf6;
      }

      /* Sessions */
      .session-list {
        display: flex;
        flex-direction: column;
      }

      .session-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        border-bottom: 1px solid #27272a;
        overflow: hidden;
        transition: all 0.3s ease-out;
        opacity: 1;
        max-height: 100px;
      }

      .session-item.removing {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        border-bottom-color: transparent;
      }

      .session-item:last-child {
        border-bottom: none;
      }

      .session-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #27272a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .session-icon idp-icon {
        opacity: 0.7;
      }

      .session-icon.current {
        background: rgba(34, 197, 94, 0.1);
      }

      .session-icon.current idp-icon {
        color: #22c55e;
        opacity: 1;
      }

      .session-info {
        flex: 1;
        min-width: 0;
      }

      .session-device {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .current-badge {
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 500;
        background: rgba(34, 197, 94, 0.1);
        color: #22c55e;
      }

      .session-details {
        font-size: 12px;
        color: #71717a;
      }

      .session-actions {
        flex-shrink: 0;
      }

      .revoke-btn {
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #27272a;
        background: transparent;
        color: #fafafa;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .revoke-btn:hover {
        background: rgba(239, 68, 68, 0.1);
        border-color: #ef4444;
        color: #ef4444;
      }

      /* Activity */
      .activity-list {
        display: flex;
        flex-direction: column;
      }

      .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 20px;
        border-bottom: 1px solid #27272a;
      }

      .activity-item:last-child {
        border-bottom: none;
      }

      .activity-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #27272a;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      .activity-icon idp-icon {
        opacity: 0.7;
      }

      .activity-icon.login {
        background: rgba(34, 197, 94, 0.1);
      }

      .activity-icon.login idp-icon {
        color: #22c55e;
        opacity: 1;
      }

      .activity-icon.logout {
        background: rgba(239, 68, 68, 0.1);
      }

      .activity-icon.logout idp-icon {
        color: #ef4444;
        opacity: 1;
      }

      .activity-info {
        flex: 1;
        min-width: 0;
      }

      .activity-description {
        font-size: 14px;
        margin-bottom: 2px;
      }

      .activity-time {
        font-size: 12px;
        color: #71717a;
      }

      /* Empty states */
      .empty-state {
        text-align: center;
        padding: 32px 20px;
        color: #71717a;
      }

      .empty-state idp-icon {
        opacity: 0.5;
        margin-bottom: 12px;
      }

      .empty-state p {
        margin: 0;
        font-size: 14px;
      }

      /* Loading state */
      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px;
        color: #71717a;
      }

      /* Create org button */
      .create-org-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        border: 1px solid #27272a;
        background: transparent;
        color: #fafafa;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .create-org-btn:hover {
        background: #27272a;
      }

      .create-org-btn idp-icon {
        font-size: 14px;
      }
    `,
  ];

  public render(): TemplateResult {
    if (this.loading) {
      return html`
        <div class="container">
          <div class="loading">Loading your account...</div>
        </div>
      `;
    }

    const userInitial = this.user?.data?.username?.charAt(0).toUpperCase() ||
                        this.user?.data?.email?.charAt(0).toUpperCase() || '?';

    return html`
      <div class="container">
        <div class="header">
          <h1>Account Overview</h1>
          <p class="subtitle">Manage your profile, organizations, and security settings</p>
        </div>

        <div class="dashboard-grid">
          <!-- Profile Card -->
          <idp-card class="card">
            <div class="card-header">
              <span class="card-title">
                <idp-icon name="user" size="16"></idp-icon>
                Profile
              </span>
            </div>
            <div class="card-body">
              <div class="profile-info">
                <div class="avatar">${userInitial}</div>
                <div class="profile-details">
                  <div class="profile-name">${this.user?.data?.username || 'Unknown User'}</div>
                  <div class="profile-email">${this.user?.data?.email || 'No email'}</div>
                </div>
              </div>
            </div>
          </idp-card>

          <!-- Organizations Card -->
          <idp-card class="card">
            <div class="card-header">
              <span class="card-title">
                <idp-icon name="building2" size="16"></idp-icon>
                Organizations
              </span>
              <idp-button variant="outline" size="sm" icon="plus" @click=${this.handleCreateOrg}>
                New
              </idp-button>
            </div>
            <div class="card-body no-padding">
              ${this.renderOrganizations()}
            </div>
          </idp-card>

          <!-- Sessions Card -->
          <idp-card class="card">
            <div class="card-header">
              <span class="card-title">
                <idp-icon name="monitor-smartphone" size="16"></idp-icon>
                Active Sessions
              </span>
            </div>
            <div class="card-body no-padding">
              ${this.renderSessions()}
            </div>
          </idp-card>

          <!-- Activity Card -->
          <idp-card class="card">
            <div class="card-header">
              <span class="card-title">
                <idp-icon name="activity" size="16"></idp-icon>
                Recent Activity
              </span>
            </div>
            <div class="card-body no-padding">
              ${this.renderActivity()}
            </div>
          </idp-card>
        </div>
      </div>
    `;
  }

  private renderOrganizations(): TemplateResult {
    if (this.organizations.length === 0) {
      return html`
        <div class="empty-state">
          <idp-icon name="building2" size="32"></idp-icon>
          <p>You're not a member of any organizations yet.</p>
        </div>
      `;
    }

    return html`
      <div class="org-list">
        ${this.organizations.map((org) => {
          const roleObj = this.roles.find(r => r.data.organizationId === org.id);
          const roleName = roleObj?.data.roles?.[0] || 'member';
          const roleClass = roleName === 'owner' ? 'owner' :
                           roleName === 'admin' ? 'admin' : '';
          const roleDisplay = roleName.charAt(0).toUpperCase() + roleName.slice(1);
          return html`
            <div class="org-item" @click=${() => this.handleSelectOrg(org)}>
              <div class="org-icon">
                <idp-icon name="building2" size="16"></idp-icon>
              </div>
              <div class="org-info">
                <div class="org-name">${org.data.name}</div>
                <div class="org-role">${org.data.slug}</div>
              </div>
              <idp-badge variant=${roleClass === 'owner' ? 'accent' : roleClass === 'admin' ? 'warn' : 'outline'}>${roleDisplay}</idp-badge>
            </div>
          `;
        })}
      </div>
    `;
  }

  private renderSessions(): TemplateResult {
    if (this.sessions.length === 0) {
      return html`
        <div class="empty-state">
          <idp-icon name="monitor" size="32"></idp-icon>
          <p>No active sessions found.</p>
        </div>
      `;
    }

    return html`
      <div class="session-list">
        ${this.sessions.map((session) => html`
          <div class="session-item" data-session-id=${session.id}>
            <div class="session-icon ${session.isCurrent ? 'current' : ''}">
              <idp-icon name=${this.getDeviceIcon(session.os)} size="16"></idp-icon>
            </div>
            <div class="session-info">
              <div class="session-device">
                ${session.deviceName || 'Unknown Device'}
                ${session.isCurrent ? html`<idp-badge variant="ok">Current</idp-badge>` : ''}
              </div>
              <div class="session-details">
                ${session.browser} · ${session.os} · Last active ${this.formatTimeAgo(session.lastActive)}
              </div>
            </div>
            ${!session.isCurrent ? html`
              <div class="session-actions">
                <idp-button variant="destructive" size="sm" @click=${() => this.handleRevokeSession(session.id)}>
                  Revoke
                </idp-button>
              </div>
            ` : ''}
          </div>
        `)}
      </div>
    `;
  }

  private renderActivity(): TemplateResult {
    if (this.activities.length === 0) {
      return html`
        <div class="empty-state">
          <idp-icon name="activity" size="32"></idp-icon>
          <p>No recent activity.</p>
        </div>
      `;
    }

    return html`
      <div class="activity-list">
        ${this.activities.slice(0, 5).map((activity) => html`
          <div class="activity-item">
            <div class="activity-icon ${this.getActivityIconClass(activity.data.action)}">
              <idp-icon name=${this.getActivityIcon(activity.data.action)} size="14"></idp-icon>
            </div>
            <div class="activity-info">
              <div class="activity-description">${activity.data.metadata.description}</div>
              <div class="activity-time">${this.formatTimeAgo(activity.data.timestamp)}</div>
            </div>
          </div>
        `)}
      </div>
    `;
  }

  private getDeviceIcon(os: string): string {
    const osLower = os?.toLowerCase() || '';
    if (osLower.includes('mac') || osLower.includes('ios')) {
      return 'lucide:laptop';
    } else if (osLower.includes('android')) {
      return 'lucide:smartphone';
    } else if (osLower.includes('windows')) {
      return 'lucide:monitor';
    } else if (osLower.includes('linux')) {
      return 'lucide:terminal';
    }
    return 'lucide:monitor';
  }

  private getActivityIcon(action: string): string {
    switch (action) {
      case 'login':
        return 'lucide:log-in';
      case 'logout':
        return 'lucide:log-out';
      case 'session_created':
        return 'lucide:key';
      case 'session_revoked':
        return 'lucide:shield-off';
      case 'org_created':
        return 'lucide:building-2';
      case 'org_joined':
        return 'lucide:user-plus';
      case 'org_left':
        return 'lucide:user-minus';
      case 'role_changed':
        return 'lucide:shield';
      case 'profile_updated':
        return 'lucide:user-cog';
      case 'app_connected':
        return 'lucide:plug';
      case 'app_disconnected':
        return 'lucide:unplug';
      default:
        return 'lucide:activity';
    }
  }

  private getActivityIconClass(action: string): string {
    if (action === 'login' || action === 'session_created' || action === 'org_joined' || action === 'app_connected') {
      return 'login';
    }
    if (action === 'logout' || action === 'session_revoked' || action === 'org_left' || action === 'app_disconnected') {
      return 'logout';
    }
    return '';
  }

  private formatTimeAgo(timestamp: number): string {
    const now = Date.now();
    const diff = now - timestamp;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return 'Just now';
    if (minutes < 60) return `${minutes}m ago`;
    if (hours < 24) return `${hours}h ago`;
    if (days < 7) return `${days}d ago`;
    return new Date(timestamp).toLocaleDateString();
  }

  public async firstUpdated() {
    await this.loadDashboardData();
  }

  private async loadDashboardData() {
    this.loading = true;

    try {
      const idpState = await IdpState.getSingletonInstance();

      // Load organizations and roles from account state
      await accountStateModule.accountState.dispatchAction(accountStateModule.getOrganizationsAction, null);
      const state = accountStateModule.accountState.getState();
      this.organizations = state.organizations;
      this.roles = state.roles;
      this.user = state.user;

      // Load sessions
      await this.loadSessions();

      // Load activity
      await this.loadActivity();
    } catch (error) {
      console.error('Error loading dashboard data:', error);
    } finally {
      this.loading = false;
    }
  }

  private async loadSessions() {
    try {
      const idpState = await IdpState.getSingletonInstance();
      const jwt = await idpState.idpClient.getJwt();

      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetUserSessions>(
        'getUserSessions'
      );

      const response = await typedRequest.fire({ jwt });
      this.sessions = response?.sessions ?? [];
    } catch (error) {
      console.error('Error loading sessions:', error);
      this.sessions = [];
    }
  }

  private async loadActivity() {
    try {
      const idpState = await IdpState.getSingletonInstance();
      const jwt = await idpState.idpClient.getJwt();

      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetUserActivity>(
        'getUserActivity'
      );

      const response = await typedRequest.fire({ jwt, limit: 10 });
      this.activities = response?.activities ?? [];
    } catch (error) {
      console.error('Error loading activity:', error);
      this.activities = [];
    }
  }

  private async handleRevokeSession(sessionId: string) {
    if (!confirm('Are you sure you want to revoke this session? The device will be logged out.')) {
      return;
    }

    try {
      const idpState = await IdpState.getSingletonInstance();
      const jwt = await idpState.idpClient.getJwt();

      const typedRequest = idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_RevokeSession>(
        'revokeSession'
      );

      await typedRequest.fire({ jwt, sessionId });

      // Animate the session item collapse before removing from DOM
      const sessionElement = this.shadowRoot?.querySelector(`[data-session-id="${sessionId}"]`) as HTMLElement;
      if (sessionElement) {
        sessionElement.classList.add('removing');
        await new Promise(resolve => setTimeout(resolve, 300)); // Wait for animation
      }

      await this.loadSessions();
    } catch (error) {
      console.error('Error revoking session:', error);
      alert('Failed to revoke session');
    }
  }

  private handleSelectOrg(org: plugins.idpInterfaces.data.IOrganization) {
    accountStateModule.accountState.dispatchAction(accountStateModule.setSelectedOrg, org);
    const parentElement = (this.getRootNode() as any).host;
    parentElement.subrouter.pushUrl(`/org/${org.data.slug}/billing`);
  }

  private handleCreateOrg() {
    // Dispatch event to open create org modal
    this.dispatchEvent(new CustomEvent('open-create-org-modal', {
      bubbles: true,
      composed: true,
    }));
  }
}