import {
  DeesElement,
  html,
  customElement,
  type TemplateResult,
  css,
  state,
  cssManager,
} from '@design.estate/dees-element';
import * as appstate from '../../appstate.js';
import * as interfaces from '../../../dist_ts_interfaces/index.js';
import { viewHostCss } from '../shared/css.js';
import { type IStatsTile } from '@design.estate/dees-catalog';

declare global {
  interface HTMLElementTagNameMap {
    'ops-view-smtp-accounts': OpsViewSmtpAccounts;
  }
}

@customElement('ops-view-smtp-accounts')
export class OpsViewSmtpAccounts extends DeesElement {
  @state()
  accessor smtpAccountsState: appstate.ISmtpAccountsState =
    appstate.smtpAccountsStatePart.getState()!;

  constructor() {
    super();
    const sub = appstate.smtpAccountsStatePart.select().subscribe((s) => {
      this.smtpAccountsState = s;
    });
    this.rxSubscriptions.push(sub);
    // Re-fetch when the user logs in (the view can be created before
    // authentication completes).
    const loginSub = appstate.loginStatePart
      .select((s) => s.isLoggedIn)
      .subscribe((isLoggedIn) => {
        if (isLoggedIn) {
          appstate.smtpAccountsStatePart.dispatchAction(appstate.fetchSmtpAccountsAction, null);
        }
      });
    this.rxSubscriptions.push(loginSub);
  }

  async connectedCallback() {
    await super.connectedCallback();
    await appstate.smtpAccountsStatePart.dispatchAction(appstate.fetchSmtpAccountsAction, null);
  }

  public static styles = [
    cssManager.defaultStyles,
    viewHostCss,
    css`
      .smtpAccountsContainer {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .statusBadge {
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .statusBadge.active {
        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
        color: ${cssManager.bdTheme('#166534', '#4ade80')};
      }

      .statusBadge.disabled {
        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
      }

      .scopePill {
        display: inline-flex;
        align-items: center;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 11px;
        background: ${cssManager.bdTheme('rgba(0, 130, 200, 0.1)', 'rgba(0, 170, 255, 0.1)')};
        color: ${cssManager.bdTheme('#0369a1', '#0af')};
        margin-right: 4px;
        margin-bottom: 2px;
      }

      .scopePill.unrestricted {
        background: ${cssManager.bdTheme('#fff7ed', '#431407')};
        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
      }

      .readinessWarning {
        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
        font-size: 11px;
      }
    `,
  ];

  public render(): TemplateResult {
    const accounts = this.smtpAccountsState.accounts;
    const enabledCount = accounts.filter((account) => account.enabled).length;
    const dkimCount = accounts.filter((account) => account.mailPolicy.dkimSign).length;
    const restrictedRecipientsCount = accounts.filter(
      (account) => account.recipientScope.mode === 'restricted',
    ).length;

    const tiles: IStatsTile[] = [
      {
        id: 'total',
        title: 'Accounts',
        value: accounts.length,
        type: 'number',
        icon: 'lucide:keyRound',
        color: '#3b82f6',
      },
      {
        id: 'enabled',
        title: 'Enabled',
        value: enabledCount,
        type: 'number',
        icon: 'lucide:check',
        color: '#22c55e',
      },
      {
        id: 'dkim',
        title: 'DKIM Signing',
        value: dkimCount,
        type: 'number',
        icon: 'lucide:penTool',
        color: '#8b5cf6',
      },
      {
        id: 'restricted',
        title: 'Recipient-Restricted',
        value: restrictedRecipientsCount,
        type: 'number',
        icon: 'lucide:shieldCheck',
        color: '#0ea5e9',
      },
    ];

    return html`
      <dees-heading level="3">SMTP Accounts</dees-heading>

      <div class="smtpAccountsContainer">
        <dees-statsgrid
          .tiles=${tiles}
          .minTileWidth=${200}
          .gridActions=${[
            {
              name: 'Refresh',
              iconName: 'lucide:RefreshCw',
              action: async () => {
                await appstate.smtpAccountsStatePart.dispatchAction(
                  appstate.fetchSmtpAccountsAction,
                  null,
                );
              },
            },
          ]}
        ></dees-statsgrid>

        <dees-table
          .heading1=${'SMTP Accounts'}
          .heading2=${'Authenticated submission accounts with sender and recipient scopes'}
          .data=${accounts}
          .dataName=${'account'}
          .searchable=${true}
          .displayFunction=${(account: interfaces.data.ISmtpAccountInfo) => ({
            Username: account.username,
            Description: account.description || '—',
            'Send AS': this.renderSenderScope(account),
            'Send TO': this.renderRecipientScope(account),
            DKIM: account.mailPolicy.dkimSign ? 'signing' : 'off',
            Status: this.renderStatusBadge(account),
            Rotated: account.lastRotatedAt
              ? new Date(account.lastRotatedAt).toLocaleDateString()
              : 'never',
          })}
          .dataActions=${[
            {
              name: 'Add Account',
              iconName: 'lucide:plus',
              type: ['header'] as any,
              actionFunc: async () => {
                await this.showCreateDialog();
              },
            },
            {
              name: 'Edit Scopes',
              iconName: 'lucide:pencil',
              type: ['inRow', 'contextmenu', 'doubleClick'] as any,
              actionFunc: async (actionData: any) => {
                const account = actionData.item as interfaces.data.ISmtpAccountInfo;
                await this.showEditDialog(account);
              },
            },
            {
              name: 'Rotate Password',
              iconName: 'lucide:rotateCw',
              type: ['inRow', 'contextmenu'] as any,
              actionFunc: async (actionData: any) => {
                const account = actionData.item as interfaces.data.ISmtpAccountInfo;
                await this.showRotateDialog(account);
              },
            },
            {
              name: 'Enable',
              iconName: 'lucide:play',
              type: ['inRow', 'contextmenu'] as any,
              actionRelevancyCheckFunc: (account: any) => !account.enabled,
              actionFunc: async (actionData: any) => {
                const account = actionData.item as interfaces.data.ISmtpAccountInfo;
                await appstate.smtpAccountsStatePart.dispatchAction(
                  appstate.toggleSmtpAccountAction,
                  { id: account.id, enabled: true },
                );
              },
            },
            {
              name: 'Disable',
              iconName: 'lucide:pause',
              type: ['inRow', 'contextmenu'] as any,
              actionRelevancyCheckFunc: (account: any) => account.enabled,
              actionFunc: async (actionData: any) => {
                const account = actionData.item as interfaces.data.ISmtpAccountInfo;
                await appstate.smtpAccountsStatePart.dispatchAction(
                  appstate.toggleSmtpAccountAction,
                  { id: account.id, enabled: false },
                );
              },
            },
            {
              name: 'Delete',
              iconName: 'lucide:trash2',
              type: ['inRow', 'contextmenu'] as any,
              actionFunc: async (actionData: any) => {
                const account = actionData.item as interfaces.data.ISmtpAccountInfo;
                await this.showDeleteDialog(account);
              },
            },
          ]}
        ></dees-table>
      </div>
    `;
  }

  private renderStatusBadge(account: interfaces.data.ISmtpAccountInfo): TemplateResult {
    return account.enabled
      ? html`<span class="statusBadge active">Active</span>`
      : html`<span class="statusBadge disabled">Disabled</span>`;
  }

  private renderSenderScope(account: interfaces.data.ISmtpAccountInfo): TemplateResult {
    const patterns = [
      ...account.senderScope.addresses,
      ...account.senderScope.domains.map((domain) => `*@${domain}`),
    ];
    if (patterns.length === 0) {
      return html`<span class="scopePill unrestricted">unrestricted</span>`;
    }
    const notReady = (account.domainReadiness || []).filter((entry) => !entry.ready);
    return html`<div style="display: flex; flex-wrap: wrap; gap: 2px; align-items: center;">
      ${patterns.map((pattern) => html`<span class="scopePill">${pattern}</span>`)}
      ${notReady.length > 0
        ? html`<span class="readinessWarning" title=${notReady.map((entry) => `${entry.domain}: ${entry.reason || 'not ready'}`).join('\n')}>
            ${notReady.length} domain${notReady.length > 1 ? 's' : ''} not ready
          </span>`
        : ''}
    </div>`;
  }

  private renderRecipientScope(account: interfaces.data.ISmtpAccountInfo): TemplateResult {
    if (account.recipientScope.mode !== 'restricted') {
      return html`<span class="scopePill">any</span>`;
    }
    const patterns = [
      ...account.recipientScope.addresses,
      ...account.recipientScope.domains.map((domain) => `*@${domain}`),
    ];
    return html`<div style="display: flex; flex-wrap: wrap; gap: 2px;">
      ${patterns.map((pattern) => html`<span class="scopePill">${pattern}</span>`)}
    </div>`;
  }

  private parseTagsValue(form: any, key: string, formData: any): string[] {
    // dees-input-tags historically was not part of dees-form's collected input
    // types (see ops-view-apitokens.ts); read the input directly with a
    // formData fallback so both catalog generations work.
    const tagsInput = form.querySelector(`dees-input-tags[key="${key}"]`)
      || [...form.querySelectorAll('dees-input-tags')].find((el: any) => el.key === key);
    const raw = (tagsInput as any)?.getValue?.() ?? (tagsInput as any)?.value ?? formData[key] ?? [];
    return (Array.isArray(raw) ? raw : [])
      .map((value: string) => String(value).trim())
      .filter(Boolean);
  }

  private async showCreateDialog() {
    await this.showAccountForm(null);
  }

  private async showEditDialog(account: interfaces.data.ISmtpAccountInfo) {
    await this.showAccountForm(account);
  }

  private async showAccountForm(account: interfaces.data.ISmtpAccountInfo | null) {
    const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
    const isEdit = account !== null;

    await DeesModal.createAndShow({
      heading: isEdit ? `Edit SMTP Account: ${account!.username}` : 'Create SMTP Account',
      content: html`
        ${isEdit
          ? ''
          : html`<div style="color: #888; margin-bottom: 12px; font-size: 13px;">
              The password is machine-generated and shown once after creation. Copy it immediately.
            </div>`}
        <dees-form>
          ${isEdit
            ? ''
            : html`<dees-input-text
                .key=${'username'}
                .label=${'Username'}
                .description=${'3-64 characters: a-z, 0-9, dot, underscore, dash'}
                .required=${true}
              ></dees-input-text>`}
          <dees-input-text
            .key=${'description'}
            .label=${'Description'}
            .value=${account?.description || ''}
          ></dees-input-text>
          <dees-input-tags
            .key=${'senderAddresses'}
            .label=${'Send AS: addresses'}
            .description=${'Exact addresses this account may use as sender, e.g. billing@example.com'}
            .value=${account?.senderScope.addresses || []}
          ></dees-input-tags>
          <dees-input-tags
            .key=${'senderDomains'}
            .label=${'Send AS: domains'}
            .description=${'Whole domains this account may send as (*@domain). Leave both empty for unrestricted senders — then relay depends on configured routes.'}
            .value=${account?.senderScope.domains || []}
          ></dees-input-tags>
          <dees-input-dropdown
            .key=${'recipientMode'}
            .label=${'Send TO'}
            .options=${[
              { option: 'Any recipient', key: 'any' },
              { option: 'Restricted to listed recipients', key: 'restricted' },
            ]}
            .selectedOption=${account?.recipientScope.mode === 'restricted'
              ? { option: 'Restricted to listed recipients', key: 'restricted' }
              : { option: 'Any recipient', key: 'any' }}
          ></dees-input-dropdown>
          <dees-input-tags
            .key=${'recipientAddresses'}
            .label=${'Send TO: addresses'}
            .description=${'Only used when Send TO is restricted'}
            .value=${account?.recipientScope.addresses || []}
          ></dees-input-tags>
          <dees-input-tags
            .key=${'recipientDomains'}
            .label=${'Send TO: domains'}
            .description=${'Only used when Send TO is restricted (*@domain)'}
            .value=${account?.recipientScope.domains || []}
          ></dees-input-tags>
          <dees-input-checkbox
            .key=${'dkimSign'}
            .label=${'DKIM-sign outbound mail (requires every sender domain to be a managed, outbound-ready email domain)'}
            .value=${account?.mailPolicy.dkimSign ?? false}
          ></dees-input-checkbox>
        </dees-form>
      `,
      menuOptions: [
        {
          name: 'Cancel',
          iconName: 'lucide:x',
          action: async (modalArg: any) => await modalArg.destroy(),
        },
        {
          name: isEdit ? 'Save' : 'Create',
          iconName: isEdit ? 'lucide:check' : 'lucide:keyRound',
          action: async (modalArg: any) => {
            const contentEl = modalArg.shadowRoot?.querySelector('.content');
            const form = contentEl?.querySelector('dees-form');
            if (!form) return;
            const formData = await form.collectFormData();

            const senderScope: interfaces.data.ISmtpAccountSenderScope = {
              addresses: this.parseTagsValue(form, 'senderAddresses', formData),
              domains: this.parseTagsValue(form, 'senderDomains', formData),
            };
            const dropdown = form.querySelector('dees-input-dropdown') as any;
            const recipientMode = (dropdown?.selectedOption?.key || formData.recipientMode || 'any') === 'restricted'
              ? 'restricted' as const
              : 'any' as const;
            // Lists are kept for both modes; the backend only enforces them
            // when mode is 'restricted'.
            const recipientScope: interfaces.data.ISmtpAccountRecipientScope = {
              mode: recipientMode,
              addresses: this.parseTagsValue(form, 'recipientAddresses', formData),
              domains: this.parseTagsValue(form, 'recipientDomains', formData),
            };
            // The form does not expose the queue policy; keep an existing
            // API-set queue instead of silently resetting it on edit.
            const mailPolicy: interfaces.data.ISmtpAccountMailPolicy = {
              dkimSign: Boolean(formData.dkimSign),
              ...(account?.mailPolicy.queue ? { queue: account.mailPolicy.queue } : {}),
            };

            try {
              if (isEdit) {
                const response = await appstate.updateSmtpAccount({
                  id: account!.id,
                  description: String(formData.description || ''),
                  senderScope,
                  recipientScope,
                  mailPolicy,
                });
                if (!response.success) {
                  DeesToast.show({ message: response.message || 'Failed to update SMTP account', type: 'error', duration: 6000 });
                  return;
                }
                await modalArg.destroy();
                this.showWarningsToast(response.warnings);
                DeesToast.show({ message: `SMTP account ${account!.username} updated`, type: 'success', duration: 3000 });
                await appstate.smtpAccountsStatePart.dispatchAction(appstate.fetchSmtpAccountsAction, null);
              } else {
                const username = String(formData.username || '').trim();
                if (!username) return;
                const response = await appstate.createSmtpAccount({
                  username,
                  description: String(formData.description || ''),
                  senderScope,
                  recipientScope,
                  mailPolicy,
                });
                if (!response.success || !response.password) {
                  DeesToast.show({ message: response.message || 'Failed to create SMTP account', type: 'error', duration: 6000 });
                  return;
                }
                await modalArg.destroy();
                this.showWarningsToast(response.warnings);
                await appstate.smtpAccountsStatePart.dispatchAction(appstate.fetchSmtpAccountsAction, null);
                await this.showPasswordOnceModal(
                  'SMTP Account Created',
                  response.account?.username || username,
                  response.password,
                );
              }
            } catch (error) {
              console.error('SMTP account form submit failed:', error);
              DeesToast.show({
                message: error instanceof Error ? error.message : 'SMTP account request failed',
                type: 'error',
                duration: 6000,
              });
            }
          },
        },
      ],
    });
  }

  private showWarningsToast(warnings?: string[]) {
    if (!warnings?.length) return;
    void import('@design.estate/dees-catalog').then(({ DeesToast }) => {
      for (const warning of warnings) {
        DeesToast.show({ message: warning, type: 'warning', duration: 6000 });
      }
    });
  }

  private async showRotateDialog(account: interfaces.data.ISmtpAccountInfo) {
    const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');

    await DeesModal.createAndShow({
      heading: 'Rotate SMTP Password',
      content: html`
        <div style="color: #ccc; padding: 8px 0;">
          <p>This will generate a new password for <strong>${account.username}</strong>. The old password stops working immediately.</p>
        </div>
      `,
      menuOptions: [
        {
          name: 'Cancel',
          iconName: 'lucide:x',
          action: async (modalArg: any) => await modalArg.destroy(),
        },
        {
          name: 'Rotate Password',
          iconName: 'lucide:rotateCw',
          action: async (modalArg: any) => {
            await modalArg.destroy();
            try {
              const response = await appstate.rotateSmtpAccountPassword(account.id);
              if (response.success && response.password) {
                await appstate.smtpAccountsStatePart.dispatchAction(appstate.fetchSmtpAccountsAction, null);
                await this.showPasswordOnceModal('Password Rotated', account.username, response.password);
              } else {
                DeesToast.show({ message: response.message || 'Failed to rotate password', type: 'error', duration: 6000 });
              }
            } catch (error) {
              console.error('Failed to rotate SMTP account password:', error);
            }
          },
        },
      ],
    });
  }

  private async showPasswordOnceModal(heading: string, username: string, password: string) {
    const { DeesModal } = await import('@design.estate/dees-catalog');
    await DeesModal.createAndShow({
      heading,
      content: html`
        <div style="color: #ccc; padding: 8px 0;">
          <p>Copy this password now. It will not be shown again.</p>
          <div style="background: #111; padding: 12px; border-radius: 6px; margin-top: 8px;">
            <div style="color: #888; font-size: 12px; margin-bottom: 4px;">Username</div>
            <code style="color: #0f8; word-break: break-all; font-size: 13px;">${username}</code>
            <div style="color: #888; font-size: 12px; margin: 8px 0 4px;">Password</div>
            <code style="color: #0f8; word-break: break-all; font-size: 13px;">${password}</code>
          </div>
        </div>
      `,
      menuOptions: [
        {
          name: 'Copy Password',
          iconName: 'lucide:copy',
          action: async () => {
            await navigator.clipboard.writeText(password);
            const { DeesToast } = await import('@design.estate/dees-catalog');
            DeesToast.show({ message: 'Password copied to clipboard', type: 'success', duration: 2500 });
          },
        },
        {
          name: 'Done',
          iconName: 'lucide:check',
          action: async (m: any) => await m.destroy(),
        },
      ],
    });
  }

  private async showDeleteDialog(account: interfaces.data.ISmtpAccountInfo) {
    const { DeesModal, DeesToast } = await import('@design.estate/dees-catalog');
    await DeesModal.createAndShow({
      heading: 'Delete SMTP Account',
      content: html`
        <div style="color: #ccc; padding: 8px 0;">
          <p>Delete <strong>${account.username}</strong>? Clients using this account will stop authenticating immediately.</p>
        </div>
      `,
      menuOptions: [
        {
          name: 'Cancel',
          iconName: 'lucide:x',
          action: async (modalArg: any) => await modalArg.destroy(),
        },
        {
          name: 'Delete',
          iconName: 'lucide:trash2',
          action: async (modalArg: any) => {
            await modalArg.destroy();
            const nextState = await appstate.smtpAccountsStatePart.dispatchAction(
              appstate.deleteSmtpAccountAction,
              account.id,
            );
            DeesToast.show({
              message: nextState.error || `SMTP account ${account.username} deleted`,
              type: nextState.error ? 'error' : 'success',
              duration: nextState.error ? 6000 : 3000,
            });
          },
        },
      ],
    });
  }
}